/* Labour Laws :: Front-end */

.ll-section {
	--ll-hs: 1;
	--ll-bs: 1;
	--ll-per: var( --ll-per-set, 4 );
	--ll-gutter: calc( ( var( --ll-canvas, 1440px ) - var( --ll-content, 1200px ) ) / 2 );

	--ll-num-size: max( 40px, calc( var( --ll-num-fs, 86px ) * var( --ll-hs ) ) );
	--ll-num-offset: calc( var( --ll-num-offset-set, 76px ) * var( --ll-hs ) );

	width: 100%;
	padding: var( --ll-pad-y, 60px ) 0 var( --ll-pad-bottom, 60px );
	margin-bottom: var( --ll-gap-bottom, 0px );
	background-image: linear-gradient( 90deg, var( --ll-bg-from, #F7F9FE ) 0%, var( --ll-bg-to, #FBF9FF ) 100% );
	font-family: 'Google Sans', sans-serif;
	box-sizing: border-box;
}
.ll-section * { box-sizing: border-box; }

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

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

/* Theme reset guards */
.ll-section h2,
.ll-section h3,
.ll-section p { margin: 0; padding: 0; }
.ll-section h2,
.ll-section h3 { font-family: inherit; letter-spacing: 0; }
.ll-section a { box-shadow: none; }
.ll-section button {
	font: inherit;
	color: inherit;
	appearance: none;
	-webkit-appearance: none;
}

/* Headline block */

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

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

.ll-subtitle {
	font-style: italic;
	font-weight: 400;
	line-height: 1.25;
	color: var( --ll-subtitle, #333333 );
	font-size: max( 14px, calc( var( --ll-subtitle-fs, 20px ) * var( --ll-hs ) ) );
}

.ll-head .ll-intro {
	max-width: 782px;
	margin: 20px auto 0;
	font-weight: 400;
	line-height: 1.25;
	color: var( --ll-intro, #9F9F9F );
	font-size: max( 13px, calc( var( --ll-intro-fs, 20px ) * var( --ll-bs ) ) );
}

/* The card slider */

.ll-slider {
	position: relative;
	margin-top: 30px;
}

.ll-viewport {
	overflow: hidden;
	padding: 28px 0 16px;
	margin: -28px 0 -16px;
}

.ll-track {
	display: flex;
	align-items: flex-start;
	gap: var( --ll-gap, 20px );
	will-change: transform;
	transition: transform .6s cubic-bezier( .22, .8, .26, 1 );
}

.ll-card {
	position: relative;
	flex: 0 0 calc( ( 100% - ( ( var( --ll-per, 4 ) - 1 ) * var( --ll-gap, 20px ) ) ) / var( --ll-per, 4 ) );
	padding-top: var( --ll-num-offset, 76px );
}

.ll-num {
	--ll-num-lift: calc( var( --ll-num-size ) * .128 );

	position: absolute;
	left: 0;
	right: 0;
	top: var( --ll-num-lift );
	z-index: 0;
	display: block;
	font-weight: 600;
	font-size: var( --ll-num-size );
	line-height: 1;
	text-align: center;
	letter-spacing: 0;
	pointer-events: none;

	background-image: linear-gradient( 180deg, var( --ll-num, #2563EB ) 0%, rgba( 245, 240, 255, 0 ) 100% );
	background-repeat: no-repeat;
	background-position: 0 0;
	background-size: 100% max( 24px, calc( var( --ll-num-offset, 76px ) - var( --ll-num-lift ) ) );
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
}

.ll-box {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: var( --ll-card-h, 102px );
	padding: 16px 14px;
	border-radius: var( --ll-card-radius, 20px );
	background: var( --ll-card-bg, #FFFFFF );
	text-align: center;
}

.ll-title {
	font-weight: 500;
	line-height: 1.278;
	color: var( --ll-title, #3D3D3D );
	font-size: max( 13px, calc( var( --ll-title-fs, 18px ) * var( --ll-bs ) ) );
}

.ll-title--link {
	display: block;
	text-decoration: none;
	color: #3D3D3D !important;
	transition: all 0.3s ease;
	cursor: pointer;
}

.ll-title--link:visited {
	color: #3D3D3D !important;
}

.ll-title--link:hover,
.ll-title--link:visited:hover {
	background: linear-gradient( 90deg, #2663EB 0%, #773DED 100% );
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}


/* Arrows (off in the design, available as an option) */
.ll-section .ll-arrow {
	position: absolute;
	top: calc( var( --ll-num-offset, 76px ) + ( var( --ll-card-h, 102px ) / 2 ) - 22px );
	z-index: 3;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 1px solid rgba( 16, 24, 40, .08 );
	border-radius: 50%;
	background: rgba( 255, 255, 255, .95 );
	color: var( --ll-heading, #333333 );
	cursor: pointer;
	box-shadow: 0 4px 14px rgba( 16, 24, 40, .08 );
	transition: transform .2s ease, box-shadow .2s ease, opacity .2s ease;
}
.ll-arrow:hover { transform: scale( 1.06 ); }
.ll-arrow:disabled { opacity: .3; cursor: default; transform: none; }
.ll-arrow-prev { left: -14px; }
.ll-arrow-next { right: -14px; }

/* Grab and drag */
.ll-viewport.is-grabbable { cursor: grab; touch-action: pan-y; }
.ll-viewport.is-grabbing { cursor: grabbing; }
.ll-viewport.is-grabbing,
.ll-viewport.is-grabbing * { user-select: none; -webkit-user-select: none; }
.ll-viewport img,
.ll-viewport a { -webkit-user-drag: none; }

/* Dots */
.ll-dots {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	margin-top: 20px;
}
.ll-dots:empty { display: none; }

.ll-dot {
	width: var( --ll-dot-size, 7px );
	height: var( --ll-dot-size, 7px );
	padding: 0;
	border: 0;
	border-radius: 20px;
	background: var( --ll-dot, #EDE9FF );
	cursor: pointer;
	transition: width .35s cubic-bezier( .22, .8, .26, 1 ), background-color .35s ease;
}
.ll-dot.is-active {
	width: var( --ll-dot-active-w, 47px );
	background: var( --ll-dot-active, #B2C4F8 );
}
.ll-dot:focus-visible { outline: 2px solid var( --ll-num, #2563EB ); outline-offset: 3px; }

/* REVEAL - "the lift" */

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

/* Headline */
.ll-js .ll-rv--rise.ll-rv-in {
	animation: ll-rise .7s cubic-bezier( .22, .8, .26, 1 ) both;
	animation-delay: calc( var( --ll-rv-i, 0 ) * 85ms );
}
@keyframes ll-rise {
	0% {
		opacity: 0;
		transform: translate3d( 0, 20px, 0 );
		filter: blur( 4px );
	}
	60% { opacity: 1; }
	100% {
		opacity: 1;
		transform: translate3d( 0, 0, 0 );
		filter: none;
	}
}

/* The lift */
.ll-js .ll-slider.ll-rv-in { opacity: 1; }

.ll-js .ll-slider .ll-num,
.ll-js .ll-slider .ll-box { opacity: 0; }

.ll-js .ll-slider.ll-rv-in .ll-num {
	animation: ll-lift-num .72s cubic-bezier( .2, .78, .28, 1 ) both;
	animation-delay: calc( var( --ll-rv-i, 0 ) * 95ms + 120ms );
}
@keyframes ll-lift-num {
	0% {
		opacity: 0;
		transform: translate3d( 0, var( --ll-num-offset, 76px ), 0 ) scale( .92 );
	}
	40% { opacity: 1; }
	100% {
		opacity: 1;
		transform: translate3d( 0, 0, 0 ) scale( 1 );
	}
}

.ll-js .ll-slider.ll-rv-in .ll-box {
	animation: ll-lift-box .72s cubic-bezier( .2, .78, .28, 1 ) both;
	animation-delay: calc( var( --ll-rv-i, 0 ) * 95ms + 120ms );
}
@keyframes ll-lift-box {
	0% {
		opacity: 0;
		transform: translate3d( 0, calc( var( --ll-num-offset, 76px ) * -.45 ), 0 ) scale( .97 );
	}
	45% { opacity: 1; }
	100% {
		opacity: 1;
		transform: translate3d( 0, 0, 0 ) scale( 1 );
	}
}

.ll-js .ll-slider .ll-dots,
.ll-js .ll-slider .ll-arrow { opacity: 0; }
.ll-js .ll-slider.ll-rv-in .ll-dots,
.ll-js .ll-slider.ll-rv-in .ll-arrow {
	animation: ll-fade-in .45s ease .85s both;
}
@keyframes ll-fade-in {
	from { opacity: 0; }
	to   { opacity: 1; }
}

@media ( prefers-reduced-motion: reduce ) {
	.ll-js .ll-rv,
	.ll-js .ll-rv.ll-rv-in,
	.ll-js .ll-slider .ll-num,
	.ll-js .ll-slider .ll-box,
	.ll-js .ll-slider .ll-dots,
	.ll-js .ll-slider .ll-arrow {
		opacity: 1;
		transform: none;
		filter: none;
		animation: none !important;
	}
	.ll-track,
	.ll-box,
	.ll-dot { transition: none !important; }
}

/* Breakpoints */

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

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

@media ( max-width: 1024px ) {
	.ll-section { --ll-hs: .82; --ll-bs: .92; --ll-per: 3; padding: 48px 0; }
}

@media ( max-width: 860px ) {
	.ll-section { --ll-hs: .8; --ll-bs: .95; --ll-per: 2; }
}

@media ( max-width: 600px ) {
	.ll-section { --ll-hs: .7; --ll-bs: .9; --ll-per: 1; --ll-gutter: 20px; padding: 40px 0; }

	.ll-arrow { width: 38px; height: 38px; }
	.ll-arrow-prev { left: -6px; }
	.ll-arrow-next { right: -6px; }
}

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