/* Call To Action :: Front-end */

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

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

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

.cta-art {
	position: absolute;
	top: 0;
	bottom: 0;
	display: block;
	opacity: var( --cta-art-opacity, 1 );
	pointer-events: none;
	background-repeat: no-repeat;
	background-size: cover;
}
.cta-art-left {
	left: 0;
	width: min( 50%, var( --cta-art-left-w, 718px ) );
	background-position: left center;
}
.cta-art-right {
	right: 0;
	width: min( 40%, var( --cta-art-right-w, 526px ) );
	background-position: right center;
}

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

.cta-copy {
	max-width: var( --cta-copy-w, 719px );
	margin: 0 auto;
	text-align: center;
}

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

/* Copy */

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

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

.cta-copy .cta-body { margin-top: 20px; }
.cta-copy .cta-body p {
	font-weight: 400;
	line-height: 1.25;
	color: var( --cta-body, #9F9F9F );
	font-size: max( 13px, calc( var( --cta-body-fs, 20px ) * var( --cta-bs ) ) );
}

/* Buttons */

.cta-actions {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: var( --cta-btn-gap, 6px );
	margin-top: 30px;
}

.cta-btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: var( --cta-btn-h, 46px );
	padding: 0 32px;
	border-radius: var( --cta-btn-radius, 13px );
	font-weight: 600;
	line-height: 1.28;
	white-space: nowrap;
	font-size: max( 14px, calc( var( --cta-btn-fs, 18px ) * var( --cta-bs ) ) );
	transition: transform .2s ease, box-shadow .2s ease, opacity .2s ease, background-color .2s ease;
}

.cta-primary {
	min-width: var( --cta-p-min, 240px );
	color: var( --cta-p-text, #FFFFFF );
	background-image: linear-gradient( 90deg, var( --cta-p-from, #2663EB ) 0%, var( --cta-p-to, #773DED ) 100% );
}
.cta-primary:hover,
.cta-primary:focus {
	color: var( --cta-p-text, #FFFFFF );
	transform: translateY( -2px );
	box-shadow: 0 10px 22px rgba( 37, 99, 235, .28 );
}

.cta-second {
	min-width: var( --cta-s-min, 261px );
	color: var( --cta-s-color, #2C65E9 );
	border: 1px solid var( --cta-s-border, #2563EB );
	background: transparent;
}
.cta-second:hover,
.cta-second:focus {
	color: var( --cta-s-color, #2C65E9 );
	transform: translateY( -2px );
	background-color: rgba( 38, 99, 235, .06 );
}
.cta-arrow { flex-shrink: 0; width: 24px; height: 24px; }
.cta-second:hover .cta-arrow { transform: translateX( 2px ); }
.cta-arrow { transition: transform .2s ease; }

/* REVEAL - "the approach" */

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

/* The art closing in */
.cta-js .cta-art { opacity: 0; }
.cta-js .cta-section.cta-rv-in .cta-art-left {
	animation: cta-close-left 1.1s cubic-bezier( .2, .75, .25, 1 ) both;
}
.cta-js .cta-section.cta-rv-in .cta-art-right {
	animation: cta-close-right 1.1s cubic-bezier( .2, .75, .25, 1 ) both;
}
@keyframes cta-close-left {
	0%   { opacity: 0; transform: translate3d( -12%, 0, 0 ); }
	100% { opacity: var( --cta-art-opacity, 1 ); transform: translate3d( 0, 0, 0 ); }
}
@keyframes cta-close-right {
	0%   { opacity: 0; transform: translate3d( 12%, 0, 0 ); }
	100% { opacity: var( --cta-art-opacity, 1 ); transform: translate3d( 0, 0, 0 ); }
}

/* The copy rising between them */
.cta-js .cta-rv--rise.cta-rv-in {
	animation: cta-rise .7s cubic-bezier( .22, .8, .26, 1 ) both;
	animation-delay: calc( var( --cta-rv-i, 0 ) * 90ms );
}
@keyframes cta-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 buttons, and the ring */
.cta-js .cta-actions.cta-rv-in { opacity: 1; }

.cta-js .cta-actions .cta-btn { opacity: 0; }
.cta-js .cta-actions.cta-rv-in .cta-btn {
	animation: cta-land .55s cubic-bezier( .2, .8, .3, 1.25 ) both;
}
.cta-js .cta-actions.cta-rv-in .cta-primary { animation-delay: .3s; }
.cta-js .cta-actions.cta-rv-in .cta-second { animation-delay: .4s; }
@keyframes cta-land {
	0%   { opacity: 0; transform: translate3d( 0, 14px, 0 ) scale( .96 ); }
	100% { opacity: 1; transform: translate3d( 0, 0, 0 ) scale( 1 ); }
}

.cta-primary::after {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: inherit;
	border: 2px solid var( --cta-p-from, #2663EB );
	opacity: 0;
	pointer-events: none;
}
.cta-js .cta-actions.cta-rv-in .cta-primary::after {
	animation: cta-ring 1.1s ease .75s both;
}
@keyframes cta-ring {
	0%   { opacity: .5; transform: scale( 1 ); }
	100% { opacity: 0; transform: scale( 1.3 ); }
}

@media ( prefers-reduced-motion: reduce ) {
	.cta-js .cta-rv,
	.cta-js .cta-rv.cta-rv-in,
	.cta-js .cta-art,
	.cta-js .cta-actions .cta-btn {
		opacity: 1;
		transform: none;
		filter: none;
		animation: none !important;
	}
	.cta-js .cta-art { opacity: var( --cta-art-opacity, 1 ); }
	.cta-js .cta-actions.cta-rv-in .cta-primary::after { animation: none !important; }
	.cta-btn, .cta-arrow { transition: none; }
}

/* Breakpoints */

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

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

@media ( max-width: 1024px ) {
	.cta-section { --cta-hs: .82; --cta-bs: .92; padding: 48px 0; }
	.cta-art-left { width: min( 34%, var( --cta-art-left-w, 718px ) ); }
	.cta-art-right { width: min( 28%, var( --cta-art-right-w, 526px ) ); }
}

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

	.cta-actions { gap: 12px; }
	.cta-btn { width: 100%; min-width: 0; max-width: 320px; }
	.cta-art { opacity: calc( var( --cta-art-opacity, 1 ) * .35 ); }
}

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