/* Client Testimonials :: Front-end */

.ct-section {
	--ct-hs: 1;
	--ct-bs: 1;
	--ct-per: var( --ct-per-set, 3 );
	--ct-cs: 1;
	--ct-pxs: 1;
	--ct-pys: 1;
	--ct-card-gap: calc( var( --ct-card-gap-set, 20px ) * var( --ct-cs ) );
	--ct-card-pad-x: calc( var( --ct-card-pad-x-set, 36px ) * var( --ct-pxs ) );
	--ct-card-pad-y: calc( var( --ct-card-pad-y-set, 27px ) * var( --ct-pys ) );
	--ct-gutter: calc( ( var( --ct-canvas, 1440px ) - var( --ct-content, 1200px ) ) / 2 );

	position: relative;
	width: 100%;
	padding: var( --ct-pad-y, 60px ) 0;
	margin-bottom: var( --ct-gap-bottom, 0px );
	background-color: var( --ct-section-bg, #FBF9FF );
	font-family: 'Google Sans', sans-serif;
	box-sizing: border-box;
}
.ct-section * { box-sizing: border-box; }

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

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

/* Theme reset guards */
.ct-section h2,
.ct-section p,
.ct-section figure,
.ct-section figcaption { margin: 0; padding: 0; }
.ct-section h2 { font-family: inherit; letter-spacing: 0; }
.ct-section blockquote {
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	quotes: none;
	font-style: normal;
	background: none;
}
.ct-section blockquote::before,
.ct-section blockquote::after { content: none; }

/* Headline block */

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

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

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

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

/* The slider */

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

.ct-viewport {
	overflow: hidden;
	padding: 20px 0;
	margin: -20px 0;
}

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

.ct-section .ct-card {
	flex: 0 0 calc( ( 100% - ( ( var( --ct-per, 3 ) - 1 ) * var( --ct-card-gap, 20px ) ) ) / var( --ct-per, 3 ) );
	display: flex;
	flex-direction: column;
	min-height: var( --ct-card-h, 198px );
	padding: var( --ct-card-pad-y, 27px ) var( --ct-card-pad-x, 36px );
	background: var( --ct-card-bg, #FFFFFF );
	border-radius: var( --ct-card-radius, 20px );
}

/* Arrows (off in the design, available as an option) */
.ct-arrow {
	position: absolute;
	top: calc( 50% - 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( --ct-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;
}
.ct-arrow:hover { transform: scale( 1.06 ); }
.ct-arrow:disabled { opacity: .3; cursor: default; transform: none; }
.ct-arrow-prev { left: -14px; }
.ct-arrow-next { right: -14px; }


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

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

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

.ct-progress {
	display: none;
	position: relative;
	width: 96px;
	height: 4px;
	margin: 22px auto 0;
	border-radius: 999px;
	background: var( --ct-dot, #EDE9FF );
	overflow: hidden;
}
.ct-progress[hidden] { display: none !important; }
.ct-progress-fill {
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 0;
	border-radius: inherit;
	background: linear-gradient( 90deg, var( --ct-dot-active, #B2C4F8 ) 0%, var( --ct-company, #7140ED ) 100% );
	transition: width .35s cubic-bezier( .22, .8, .26, 1 );
}

.ct-company {
	display: block;
	font-family: 'Google Sans', sans-serif;
	font-weight: var( --ct-company-w, 600 );
	line-height: 1;
	letter-spacing: 0;
	color: var( --ct-company, #7140ED );
	font-size: max( 14px, calc( var( --ct-company-fs, 20px ) * var( --ct-hs ) ) );
}

.ct-who {
	display: block;
	font-size: max( 14px, calc( var( --ct-company-fs, 20px ) * var( --ct-hs ) ) );
	min-height: calc( ( var( --ct-company-l, 2 ) * 1em ) + var( --ct-who-tail, 21px ) );
}

.ct-role {
	display: block;
	font-family: 'Google Sans', sans-serif;
	margin-top: 3px;
	font-weight: 400;
	line-height: 1.286;
	color: var( --ct-role, #9F9F9F );
	font-size: max( 11px, calc( var( --ct-role-fs, 14px ) * var( --ct-bs ) ) );
}

.ct-quote {
	display: flex;
	align-items: flex-start;
	gap: 6px;
	margin-top: 13px;
}
.ct-mark {
	flex: 0 0 auto;
	width: var( --ct-mark-size, 24px );
	height: var( --ct-mark-size, 24px );
	color: var( --ct-mark, #9F9F9F );
}
.ct-words {
	margin-top: 7px;
	font-weight: 400;
	line-height: 1.286;
	color: var( --ct-quote, #9F9F9F );
	font-size: max( 11px, calc( var( --ct-quote-fs, 14px ) * var( --ct-bs ) ) );
}

/* REVEAL - "laid down" */

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

.ct-js .ct-rv,
.ct-js .ct-slider .ct-card {
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	-webkit-transform: translateZ(0);
	transform: translateZ(0);
}

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

/* Laid down */
.ct-js .ct-slider.ct-rv-in { opacity: 1; }

.ct-js .ct-slider .ct-card { opacity: 0; }
.ct-js .ct-slider.ct-rv-in .ct-card {
	animation: ct-lay .65s cubic-bezier( .2, .78, .28, 1 ) both;
	animation-delay: calc( var( --ct-n, 0 ) * 110ms );
}
@keyframes ct-lay {
	0% {
		opacity: 0;
		transform: rotate( -2.2deg ) translate3d( 0, -16px, 0 ) scale( .975 );
		box-shadow: 0 18px 30px rgba( 16, 24, 40, .12 );
	}
	50% { opacity: 1; }
	100% {
		opacity: 1;
		transform: rotate( 0deg ) translate3d( 0, 0, 0 ) scale( 1 );
		box-shadow: 0 0 0 rgba( 16, 24, 40, 0 );
	}
}
.ct-js .ct-slider.ct-rv-in .ct-card:nth-child( even ) { animation-name: ct-lay-alt; }
@keyframes ct-lay-alt {
	0% {
		opacity: 0;
		transform: rotate( 2.2deg ) translate3d( 0, -16px, 0 ) scale( .975 );
		box-shadow: 0 18px 30px rgba( 16, 24, 40, .12 );
	}
	50% { opacity: 1; }
	100% {
		opacity: 1;
		transform: rotate( 0deg ) translate3d( 0, 0, 0 ) scale( 1 );
		box-shadow: 0 0 0 rgba( 16, 24, 40, 0 );
	}
}

/* The controls, after the cards are down */
.ct-js .ct-slider .ct-dots,
.ct-js .ct-slider .ct-arrow { opacity: 0; }
.ct-js .ct-slider.ct-rv-in .ct-dots,
.ct-js .ct-slider.ct-rv-in .ct-arrow {
	animation: ct-rise .5s ease both;
	animation-delay: .62s;
}

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

/* Breakpoints */

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

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

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

@media ( max-width: 600px ) {
	.ct-dots { display: none; }
	.ct-progress { display: block; }

	.ct-section {
		--ct-hs: .7;
		--ct-bs: .92;
		--ct-per: 1;
		--ct-gutter: 20px;
		--ct-cs: .75;
		--ct-pxs: .67;
		--ct-pys: .81;
		padding: 40px 0;
	}
	.ct-arrow-prev { left: 6px; }
	.ct-arrow-next { right: 6px; }
}

@media ( max-width: 400px ) {
	.ct-section { --ct-hs: .64; --ct-bs: .9; --ct-gutter: 16px; --ct-cs: .65; }
	.ct-arrow { width: 38px; height: 38px; top: calc( 50% - 19px ); }
	.ct-head { padding: 0 12px; }
}

@media ( max-width: 359px ) {
	.ct-heading { font-size: 22px; }
}