/* Our Services :: Front-end */

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

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

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

/* Theme reset guards */
.os-section h2,
.os-section h3,
.os-section p { margin: 0; padding: 0; }
.os-section h2,
.os-section h3 { font-family: inherit; letter-spacing: 0; }
.os-section ul,
.os-section li {
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
}
.os-section li::before,
.os-section li::marker { content: none; }

/* Headline block */

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

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

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

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

/* The cards */

.os-grid {
	display: grid;
	grid-template-columns: repeat( var( --os-per, 3 ), minmax( 0, 1fr ) );
	gap: var( --os-row-gap, 20px ) var( --os-gap, 20px );
	margin-top: 30px;
	justify-items: stretch;
}

.os-card {
	position: relative;
	display: flex;
	flex-direction: column;
	min-height: var( --os-card-h, 310px );
	padding: var( --os-card-pad-y, 22px ) var( --os-card-pad-x, 19px );
	background: var( --os-card-bg, #FBF9FF );
	border-radius: var( --os-card-radius, 0px );
	overflow: hidden;
}
.os-card::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	width: var( --os-rule-w, 1px );
	background: var( --os-rule, #773DED );
}

.os-disc {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: var( --os-disc, 60px );
	height: var( --os-disc, 60px );
	border-radius: 50%;
	background-image: linear-gradient(
		180deg,
		color-mix( in srgb, var( --os-disc-from, #B5B1EE ) 60%, transparent ) 0%,
		var( --os-disc-to, #F3EEFE ) 100%
	);
	color: var( --os-icon-color, #2D2D2D );
}
@supports not ( background-image: linear-gradient( in srgb, red, blue ) ) {
	.os-disc {
		background-image: linear-gradient( 180deg, var( --os-disc-from, #B5B1EE ) 0%, var( --os-disc-to, #F3EEFE ) 100% );
	}
}
.os-icon-svg {
	display: block;
	width: var( --os-icon, 45px );
	height: var( --os-icon, 45px );
}
.os-icon-svg--disc {
	width: 100%;
	height: 100%;
}

.os-title {
	margin-top: 27px !important;
	font-family: 'Plus Jakarta Sans', sans-serif !important;
	font-weight: 700;
	line-height: 1.25;
	color: var( --os-title, #333333 );
	font-size: max( 16px, calc( var( --os-title-fs, 24px ) * var( --os-hs ) ) );
}

.os-card .os-desc { margin-top: var( --os-gap-desc, 11px ) !important; }
.os-card .os-list { margin-top: var( --os-gap-list, 20px ) !important; }

.os-card .os-desc,
.os-card .os-list li {
	font-family: 'Plus Jakarta Sans', sans-serif;
	font-weight: 400;
	line-height: 1.25;
	color: var( --os-item, #778AA9 );
	font-size: max( 12px, calc( var( --os-item-fs, 16px ) * var( --os-bs ) ) );
}

.os-card .os-list li + li { margin-top: var( --os-item-gap, 2px ) !important; }

/* The bullet */
.os-card .os-list li {
	position: relative;
	padding-left: calc( var( --os-bullet-size, 6px ) + var( --os-bullet-gap, 12px ) ) !important;
}

.os-card .os-list li::before {
	content: '';
	position: absolute;
	left: 0;

	top: calc( ( 1.25em - var( --os-bullet-size, 6px ) ) / 2 );

	width: var( --os-bullet-size, 6px );
	height: var( --os-bullet-size, 6px );
	border-radius: 50%;

	background: linear-gradient(
		135deg,
		var( --os-bullet-from, #2563EB ) 0%,
		var( --os-bullet-to, #7C3AED ) 100%
	);
}

/* REVEAL - "the ledger" */

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

/* Headline */
.os-js .os-rv--rise.os-rv-in {
	animation: os-rise .7s cubic-bezier( .22, .8, .26, 1 ) both;
	animation-delay: calc( var( --os-rv-i, 0 ) * 85ms );
}
@keyframes os-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 cards */
.os-js .os-grid.os-rv-in { opacity: 1; }

.os-card { --os-turn: calc( var( --os-rv-i, 0 ) * 120ms ); }

.os-js .os-grid .os-card { opacity: 0; }
.os-js .os-grid.os-rv-in .os-card {
	animation: os-card-in .5s ease both;
	animation-delay: var( --os-turn );
}
@keyframes os-card-in {
	from { opacity: 0; }
	to   { opacity: 1; }
}

.os-js .os-grid .os-card::before { transform: scaleY( 0 ); transform-origin: top center; }
.os-js .os-grid.os-rv-in .os-card::before {
	animation: os-rule .55s cubic-bezier( .3, .8, .3, 1 ) both;
	animation-delay: var( --os-turn );
}
@keyframes os-rule {
	from { transform: scaleY( 0 ); }
	to   { transform: scaleY( 1 ); }
}

.os-js .os-grid .os-disc,
.os-js .os-grid .os-title,
.os-js .os-grid .os-desc { opacity: 0; }
.os-js .os-grid.os-rv-in .os-disc {
	animation: os-pop .5s cubic-bezier( .2, .8, .3, 1.4 ) both;
	animation-delay: calc( var( --os-turn ) + 220ms );
}
@keyframes os-pop {
	0%   { opacity: 0; transform: scale( .5 ); }
	100% { opacity: 1; transform: scale( 1 ); }
}
.os-js .os-grid.os-rv-in .os-title,
.os-js .os-grid.os-rv-in .os-desc {
	animation: os-settle .45s cubic-bezier( .22, .8, .26, 1 ) both;
	animation-delay: calc( var( --os-turn ) + 320ms );
}
@keyframes os-settle {
	0%   { opacity: 0; transform: translate3d( 0, 8px, 0 ); }
	100% { opacity: 1; transform: translate3d( 0, 0, 0 ); }
}

.os-js .os-grid .os-list li { opacity: 0; }
.os-js .os-grid.os-rv-in .os-list li {
	animation: os-tick .4s ease both;
	animation-delay: calc( var( --os-turn ) + ( var( --os-n, 0 ) * 55ms ) + 400ms );
}
@keyframes os-tick {
	0%   { opacity: 0; transform: translate3d( -8px, 0, 0 ); }
	100% { opacity: 1; transform: translate3d( 0, 0, 0 ); }
}

@media ( prefers-reduced-motion: reduce ) {
	.os-js .os-rv,
	.os-js .os-rv.os-rv-in,
	.os-js .os-grid .os-card,
	.os-js .os-grid .os-disc,
	.os-js .os-grid .os-title,
	.os-js .os-grid .os-desc,
	.os-js .os-grid .os-list li {
		opacity: 1;
		transform: none;
		filter: none;
		animation: none !important;
	}
	.os-js .os-grid .os-card::before { transform: scaleY( 1 ); animation: none !important; }
}

/* Breakpoints */

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

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

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

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

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

/* RESPONSIVE OUR-SERVICES IMPROVEMENTS - Mobile Optimization */

@media ( max-width: 375px ) {
	.os-card {
		padding: var( --os-card-pad-y, 16px ) var( --os-card-pad-x, 12px ) !important;
	}
}

@media ( max-width: 768px ) {
	.os-disc {
		width: var( --os-disc-mobile, 50px ) !important;
		height: var( --os-disc-mobile, 50px ) !important;
	}
	.os-icon-svg {
		width: var( --os-icon-mobile, 32px ) !important;
		height: var( --os-icon-mobile, 32px ) !important;
	}
}

@media ( min-width: 769px ) {
	.os-icon-svg {
		width: var( --os-icon, 40px ) !important;
		height: var( --os-icon, 40px ) !important;
	}
}

@media ( max-width: 480px ) {
	.os-title {
		font-size: max( 14px, calc( var( --os-title-fs, 18px ) * var( --os-hs ) ) ) !important;
		line-height: 1.3 !important;
		max-width: 100%;
		word-wrap: break-word;
		overflow-wrap: break-word;
	}
}

.os-card {
	border: 1px solid var( --os-card-border, #E5E7EB );
	box-shadow: 0 2px 8px var( --os-card-shadow, rgba(0, 0, 0, 0.08) );
}

@media ( max-width: 768px ) and ( min-width: 601px ) {
	.os-grid {
		gap: var( --os-row-gap, 20px ) var( --os-gap-tablet, 16px );
		margin-right: var( --os-margin-tablet, 16px );
	}
	.os-container {
		padding: 0 var( --os-gutter );
	}
}