/* Our Team :: Front-end */

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

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

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

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

.ot-sr {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect( 0 0 0 0 );
	clip-path: inset( 50% );
	white-space: nowrap;
	border: 0;
}

/* Headline block */

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

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

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

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

/* The members */

.ot-grid {
	display: grid;
	grid-template-columns: repeat( var( --ot-per, 4 ), minmax( 0, 1fr ) );
	gap: 40px var( --ot-gap, 20px );
	margin-top: 30px;
	perspective: 1600px;
}

.ot-member {
	min-width: 0;
	width: 100%;
	max-width: var( --ot-card-max, 350px );
	margin-inline: auto;
}

.ot-photo {
	position: relative;
	width: 100%;
	overflow: hidden;
	border: 1px solid var( --ot-photo-border, #F5F5F5 );
	border-radius: var( --ot-photo-radius, 20px );
	box-shadow: 0 0 50px rgba( 0, 0, 0, .04 );
	background: #F4F5F7;
}
.ot-photo img {
	display: block;
	width: 100%;
	object-fit: cover;
	object-position: var( --ot-photo-pos, center 25% );
}

.ot-member .ot-name {
	margin-top: 20px;
	font-weight: 700;
	line-height: 1.25;
	color: var( --ot-name, #333333 );
	font-size: max( 15px, calc( var( --ot-name-fs, 20px ) * var( --ot-hs ) ) );
}

.ot-member .ot-role {
	margin-top: 10px;
	font-weight: 600;
	line-height: 1.25;
	color: var( --ot-role, #AAA9A8 );
	font-size: max( 12px, calc( var( --ot-role-fs, 16px ) * var( --ot-bs ) ) );
}

.ot-socials {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var( --ot-social-gap, 20px );
	margin-top: 20px;
}
.ot-social {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var( --ot-social, #ADADAD );
	transition: color .2s ease, transform .2s ease;
}
.ot-social:hover,
.ot-social:focus {
	color: var( --ot-social-hover, #2563EB );
	transform: translateY( -2px );
}
.ot-social-svg {
	display: block;
	width: var( --ot-social-size, 20px );
	height: var( --ot-social-size, 20px );
}

/* REVEAL - "the introduction" */

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

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

.ot-member { --ot-turn: calc( var( --ot-rv-i, 0 ) * 130ms ); }

.ot-js .ot-grid .ot-photo { opacity: 0; }
.ot-js .ot-grid.ot-rv-in .ot-photo {
	animation: ot-face .8s cubic-bezier( .2, .78, .28, 1 ) both;
	animation-delay: var( --ot-turn );
}
@keyframes ot-face {
	0% {
		opacity: 0;
		transform: rotateY( -34deg ) translate3d( 26px, 0, -70px );
		box-shadow: 0 0 0 rgba( 0, 0, 0, 0 );
	}
	55% { opacity: 1; }
	100% {
		opacity: 1;
		transform: rotateY( 0deg ) translate3d( 0, 0, 0 );
		box-shadow: 0 0 50px rgba( 0, 0, 0, .04 );
	}
}

.ot-js .ot-grid .ot-name,
.ot-js .ot-grid .ot-role { opacity: 0; }
.ot-js .ot-grid.ot-rv-in .ot-name {
	animation: ot-settle .5s cubic-bezier( .22, .8, .26, 1 ) both;
	animation-delay: calc( var( --ot-turn ) + 260ms );
}
.ot-js .ot-grid.ot-rv-in .ot-role {
	animation: ot-settle .5s cubic-bezier( .22, .8, .26, 1 ) both;
	animation-delay: calc( var( --ot-turn ) + 340ms );
}
@keyframes ot-settle {
	0%   { opacity: 0; transform: translate3d( 0, 10px, 0 ); }
	100% { opacity: 1; transform: translate3d( 0, 0, 0 ); }
}

.ot-js .ot-grid .ot-social { opacity: 0; }
.ot-js .ot-grid.ot-rv-in .ot-social {
	animation: ot-mark .4s cubic-bezier( .2, .8, .3, 1.4 ) both;
	animation-delay: calc( var( --ot-turn ) + ( var( --ot-s, 0 ) * 60ms ) + 420ms );
}
@keyframes ot-mark {
	0%   { opacity: 0; transform: scale( .4 ); }
	100% { opacity: 1; transform: scale( 1 ); }
}

@media ( prefers-reduced-motion: reduce ) {
	.ot-js .ot-rv,
	.ot-js .ot-rv.ot-rv-in,
	.ot-js .ot-grid .ot-photo,
	.ot-js .ot-grid .ot-name,
	.ot-js .ot-grid .ot-role,
	.ot-js .ot-grid .ot-social {
		opacity: 1;
		transform: none;
		filter: none;
		animation: none !important;
	}
	.ot-social { transition: none; }
}

/* Breakpoints */

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

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

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

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

@media ( max-width: 600px ) {
	.ot-section { --ot-hs: .7; --ot-bs: .9; --ot-gutter: 20px; padding: 40px 0; }
	.ot-grid { gap: 30px 16px; }
	.ot-member { max-width: 280px; }
	.ot-member .ot-name { margin-top: 14px; }
	.ot-socials { margin-top: 14px; gap: 16px; }
}

@media ( max-width: 460px ) {
	.ot-section { --ot-hs: .64; --ot-bs: .88; --ot-per: 2; }

	.ot-socials { gap: 12px; }
	.ot-social-svg { width: 18px; height: 18px; }
}

@media ( max-width: 400px ) {
	.ot-section { --ot-gutter: 16px; }
	.ot-socials { gap: 10px; }
	.ot-social-svg { width: 16px; height: 16px; }
}