/* Compliant Workplace :: Front-end */

.cw-section {
	--cw-hs: 1;
	--cw-bs: 1;
	--cw-s: 1;
	--cw-mk: 1;

	--cw-pad-top: var( --cw-pad-top-set, 94px );
	--cw-pad-bottom: var( --cw-pad-bottom-set, 83px );
	--cw-min-h: calc( var( --cw-min-h-set, 363px ) * var( --cw-s ) );
	--cw-btns-top: var( --cw-btns-top-set, 24px );
	--cw-btn-h: var( --cw-btn-h-set, 46px );
	--cw-btn-gap: var( --cw-btn-gap-set, 20px );
	--cw-b1-pad: var( --cw-b1-pad-set, 42px );
	--cw-b2-pad: var( --cw-b2-pad-set, 33px );
	--cw-mark-w: calc( var( --cw-mark-w-set, 237px ) * var( --cw-mk ) );
	--cw-mark-gap: calc( var( --cw-mark-gap-set, 18px ) * var( --cw-s ) );

	--cw-gutter: calc( ( var( --cw-canvas, 1440px ) - var( --cw-content, 1200px ) ) / 2 );

	--cw-gutter-left: 13px;

	position: relative;
	display: flex;
	align-items: stretch;
	width: 100%;
	min-height: var( --cw-min-h );
	margin-bottom: var( --cw-gap-bottom, 0px );
	overflow: hidden;
	background-color: var( --cw-section-bg, #FFFFFF );
	font-family: 'Google Sans', sans-serif;
	box-sizing: border-box;
}
.cw-section * { box-sizing: border-box; }

/* Full bleed */
.cw-section.cw-full {
	width: var( --cw-vw, 100vw );
	max-width: var( --cw-vw, 100vw );
	margin-left: calc( 50% - ( var( --cw-vw, 100vw ) / 2 ) );
	margin-right: calc( 50% - ( var( --cw-vw, 100vw ) / 2 ) );
}

.cw-container {
	position: relative;
	flex: 1 1 auto;
	max-width: var( --cw-canvas, 1440px );
	margin: 0 auto;
	padding: 0 var( --cw-gutter ) 0 var( --cw-gutter-left, var( --cw-gutter ) );
}

/* Theme reset guards */
.cw-section h2,
.cw-section p { margin: 0; padding: 0; }
.cw-section h2 { font-family: inherit; letter-spacing: 0; }
.cw-section a { box-shadow: none; text-decoration: none; }

/* The row: artwork, then copy */
.cw-row {
	flex: 1 1 auto;
	display: flex;
	align-items: stretch;
	gap: var( --cw-mark-gap );
	min-width: 0;
}

.cw-figure {
	position: relative;
	flex: 0 0 var( --cw-mark-w );
	min-width: 0;
}

.cw-mark {
	position: absolute;
	top: 0;
	bottom: 0;
	left: var( --cw-mark-left, 0px );
	opacity: var( --cw-mark-opacity, .1 );
	pointer-events: none;
	user-select: none;
}
.cw-section .cw-mark {
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	max-height: none !important;
	object-fit: contain;
	object-position: left bottom;
}

/* The copy */
.cw-copy {
	position: relative;
	z-index: 1;
	flex: 1 1 auto;
	min-width: 0;
	padding: var( --cw-pad-top ) 0 var( --cw-pad-bottom );
}

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

.cw-intro {
	margin-top: 16px;
	max-width: var( --cw-intro-w, 896px );
	font-weight: 400;
	line-height: 1.25;
	color: var( --cw-intro, #9F9F9F );
	font-size: max( 13px, calc( var( --cw-intro-fs, 20px ) * var( --cw-bs ) ) );
}

/* Buttons */
.cw-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var( --cw-btn-gap );
	margin-top: var( --cw-btns-top );
}

.cw-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: var( --cw-btn-h );
	border-radius: var( --cw-btn-radius, 13px );
	font-weight: 600;
	line-height: 1.28;
	text-align: center;
	transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease, color .2s ease;
	font-size: max( 14px, calc( var( --cw-btn-fs, 18px ) * var( --cw-bs ) ) );
}

.cw-btn-1 {
	min-width: var( --cw-b1-min, 194px );
	padding: 0 var( --cw-b1-pad );
	border: 0;
	color: var( --cw-b1-text, #FFFFFF );
	background-image: linear-gradient( 90deg, var( --cw-b1-from, #2663EB ) 0%, var( --cw-b1-to, #773DED ) 100% );
}
.cw-btn-1:hover,
.cw-btn-1:focus {
	color: var( --cw-b1-text, #FFFFFF );
	transform: translateY( -2px );
	box-shadow: 0 10px 22px rgba( 37, 99, 235, .28 );
}

.cw-btn-2 {
	min-width: var( --cw-b2-min, 261px );
	padding: 0 var( --cw-b2-pad );
	border: 1px solid var( --cw-b2-border, #2563EB );
	color: var( --cw-b2-text, #2C65E9 );
	background-color: var( --cw-b2-bg, #FFFFFF );
}
.cw-btn-2:hover,
.cw-btn-2:focus {
	color: var( --cw-b2-text, #2C65E9 );
	transform: translateY( -2px );
	background-color: rgba( 38, 99, 235, .06 );
}

.cw-btn--idle { cursor: default; }
.cw-btn--idle:hover { transform: none; box-shadow: none; }

/* REVEAL - "the balance" */

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

/* The scales, swinging to level */
.cw-js .cw-mark.cw-rv-in {
	transform-origin: 50% 8%;
	animation: cw-swing 1.5s cubic-bezier( .3, .82, .28, 1 ) both;
}
@keyframes cw-swing {
	0%   { opacity: 0; transform: rotate( 5.5deg ); }
	28%  { opacity: var( --cw-mark-opacity, .1 ); transform: rotate( -3.2deg ); }
	50%  { transform: rotate( 1.8deg ); }
	70%  { transform: rotate( -.85deg ); }
	86%  { transform: rotate( .32deg ); }
	100% { opacity: var( --cw-mark-opacity, .1 ); transform: rotate( 0deg ); }
}

/* The copy, righting itself */
.cw-js .cw-heading.cw-rv-in,
.cw-js .cw-intro.cw-rv-in {
	transform-origin: 0 100%;
	animation: cw-level .8s cubic-bezier( .22, .8, .26, 1 ) both;
}
.cw-js .cw-intro.cw-rv-in { animation-delay: .12s; }
@keyframes cw-level {
	0%   { opacity: 0; transform: translate3d( -20px, 0, 0 ) skewX( -4.5deg ); }
	60%  { opacity: 1; }
	100% { opacity: 1; transform: none; }
}

/* The buttons, landing like weights on the pans */
.cw-js .cw-btn.cw-rv-in {
	animation: cw-weigh .62s cubic-bezier( .2, 1.5, .35, 1 ) both;
	animation-delay: calc( .34s + ( var( --cw-rv-i, 0 ) * .12s ) );
}
@keyframes cw-weigh {
	0%   { opacity: 0; transform: translate3d( 0, -15px, 0 ) scale( .96 ); }
	55%  { opacity: 1; }
	100% { opacity: 1; transform: none; }
}

@media ( prefers-reduced-motion: reduce ) {
	.cw-js .cw-rv,
	.cw-js .cw-rv.cw-rv-in {
		opacity: 1;
		transform: none;
		animation: none !important;
	}
	.cw-js .cw-mark,
	.cw-js .cw-mark.cw-rv-in { opacity: var( --cw-mark-opacity, .1 ); }
	.cw-btn { transition: none !important; }
}

/* Breakpoints */

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

@media ( max-width: 1200px ) {
	.cw-section { --cw-hs: .9; --cw-bs: .95; --cw-mk: .92; }
}

@media ( max-width: 1024px ) {
	.cw-section { --cw-hs: .82; --cw-bs: .92; --cw-s: .82; --cw-mk: .8; --cw-pad-top: 72px; --cw-pad-bottom: 64px; }
}

@media ( max-width: 900px ) {
	.cw-section { --cw-mk: .66; }
}

@media ( max-width: 700px ) {
	.cw-section { --cw-hs: .7; --cw-bs: .95; --cw-s: .7; --cw-mk: .78; }
	.cw-row { display: block; position: relative; }
	.cw-figure {
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		width: var( --cw-mark-w );
	}
}

@media ( max-width: 600px ) {
	.cw-figure { display: none; }
}

@media ( max-width: 600px ) {
	.cw-section { --cw-gutter: 20px; --cw-s: .62; --cw-mk: .7; --cw-pad-top: 52px; --cw-pad-bottom: 46px; }
}

@media ( max-width: 480px ) {
	.cw-actions { flex-direction: column; align-items: stretch; }
	.cw-btn { width: 100%; min-width: 0; max-width: 320px; }
}

@media ( max-width: 400px ) {
	.cw-section { --cw-hs: .64; --cw-bs: .9; --cw-gutter: 16px; --cw-mk: .6; }
}