/* Our Skills :: Front-end */

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

	--osk-pad-y: var( --osk-pad-y-set, 39px );

	--osk-gap-above: 30px;

	position: relative;
	width: 100%;
	min-height: var( --osk-band-min-h, 370px );
	margin-top: var( --osk-gap-above );
	padding: var( --osk-pad-y ) var( --osk-gutter );

	background: linear-gradient(
		var( --osk-band-angle, 90deg ),
		var( --osk-band-from, #F7F9FE ) 0%,
		var( --osk-band-to, #FBF9FF ) 100%
	);

	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;

	font-family: 'Google Sans', sans-serif;
	text-align: center;
	box-sizing: border-box;
}
.osk-section * { box-sizing: border-box; }

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

.osk-inner {
	width: 100%;
	max-width: var( --osk-content, 1200px );
	margin: 0 auto;
}

/* Theme reset guards */
.osk-section h2,
.osk-section p { margin: 0; padding: 0; }
.osk-section h2 { font-family: inherit; letter-spacing: 0; }

/* Headline */

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

.osk-section .osk-subtitle {
	max-width: var( --osk-subtitle-w, 714px );
	margin: var( --osk-gap-subtitle, 10px ) auto 0;
	font-weight: 400;
	line-height: 1.25;
	color: var( --osk-subtitle, #9F9F9F );
	font-size: max( 14px, calc( var( --osk-subtitle-fs, 20px ) * var( --osk-bs ) ) );
}

/* The row of rings */
.osk-row {
	display: grid;
	grid-template-columns: repeat( var( --osk-cols, 4 ), minmax( 0, 1fr ) );
	row-gap: var( --osk-row-gap-y, 40px );
	width: 100%;
	max-width: var( --osk-row, 813px );
	margin: var( --osk-gap-row, 30px ) auto 0;

	align-items: start;
}

.osk-skill {
	display: flex;
	flex-direction: column;
	align-items: center;
}

/* The dial */
.osk-dial {
	display: grid;
	place-items: center;
	width: var( --osk-ring, 100px );
	height: var( --osk-ring, 100px );
}
.osk-dial > * { grid-area: 1 / 1; }

.osk-ring {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
}

.osk-value {
	font-weight: 500;
	line-height: 1.25;
	color: var( --osk-value, #000000 );
	font-size: max( 12px, calc( var( --osk-value-fs, 20px ) * var( --osk-bs ) ) );
	font-variant-numeric: tabular-nums;
	font-feature-settings: 'tnum' 1;
}

.osk-section .osk-label {
	max-width: var( --osk-label-w, 171px );
	margin-top: var( --osk-gap-label, 30px );
	font-weight: 600;
	line-height: 1.27;
	color: var( --osk-label, #333333 );
	font-size: max( 13px, calc( var( --osk-label-fs, 22px ) * var( --osk-bs ) ) );
}

/* REVEAL */

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

.osk-js .osk-rv--rise.osk-rv-in {
	animation: osk-rise .75s cubic-bezier( .22, .8, .26, 1 ) both;
	animation-delay: calc( var( --osk-rv-i, 0 ) * 85ms );
}
@keyframes osk-rise {
	0% {
		opacity: 0;
		transform: translate3d( 0, 18px, 0 );
	}
	55% { opacity: 1; }
	100% {
		opacity: 1;
		transform: translate3d( 0, 0, 0 );
	}
}

.osk-js .osk-skill .osk-dial { opacity: 0; }
.osk-js .osk-skill.osk-rv-in .osk-dial {
	animation: osk-settle .65s cubic-bezier( .22, .8, .26, 1 ) both;
	animation-delay: calc( var( --osk-rv-i, 0 ) * 85ms + 60ms );
}
@keyframes osk-settle {
	0% {
		opacity: 0;
		transform: scale( .9 );
	}
	55% { opacity: 1; }
	100% {
		opacity: 1;
		transform: scale( 1 );
	}
}

.osk-js .osk-ring-arc { stroke-dashoffset: var( --osk-circ, 0 ); }

.osk-js .osk-rv-in .osk-ring-arc {
	stroke-dashoffset: calc( var( --osk-circ, 0 ) - var( --osk-arc, 0 ) );
	transition: stroke-dashoffset 1.1s cubic-bezier( .22, .8, .26, 1 );
	transition-delay: calc( var( --osk-rv-i, 0 ) * 85ms + 180ms );
}

@media ( prefers-reduced-motion: reduce ) {
	.osk-js .osk-rv,
	.osk-js .osk-rv.osk-rv-in,
	.osk-js .osk-skill .osk-dial,
	.osk-js .osk-skill.osk-rv-in .osk-dial {
		opacity: 1;
		transform: none;
		animation: none !important;
	}
	.osk-js .osk-ring-arc,
	.osk-js .osk-rv-in .osk-ring-arc {
		stroke-dashoffset: calc( var( --osk-circ, 0 ) - var( --osk-arc, 0 ) );
		transition: none !important;
	}
}

/* Breakpoints */

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

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

@media ( max-width: 1024px ) {
	.osk-section {
		--osk-hs: .82;
		--osk-bs: .92;
		--osk-pad-y: 48px;
		--osk-gap-above: 24px;
		min-height: 0;
	}
}

@media ( max-width: 900px ) {
	.osk-section {
		--osk-hs: .8;
		--osk-bs: .95;
		--osk-cols: 2;
		--osk-row-gap-y: 36px;
		--osk-gap-above: 22px;
	}
	.osk-row { max-width: 480px; }
}

@media ( max-width: 600px ) {
	.osk-section {
		--osk-hs: .7;
		--osk-bs: .9;
		--osk-gutter: 20px;
		--osk-pad-y: 40px;
		--osk-gap-above: 20px;
		--osk-gap-label: 20px;
	}
	.osk-row { max-width: 360px; }
}

@media ( max-width: 400px ) {
	.osk-section {
		--osk-hs: .64;
		--osk-bs: .88;
		--osk-cols: 1;
		--osk-gutter: 16px;
		--osk-row-gap-y: 28px;
		--osk-gap-above: 18px;
	}
	.osk-row { max-width: 220px; }
}