/* #region @keyframes */
@keyframes heroFadeIn {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
		translate: 0 -20px;
	}
}

@keyframes nodeGrow {
	from {
		opacity: 0;
		scale: 0;
	}

	to {
		opacity: 1;
		scale: 1;
	}
}

@keyframes drawLineLeft {
	from {
		width: 0;
	}

	to {
		width: calc(50% - 1rem);
	}
}

@keyframes drawLineRight {
	from {
		width: 0;
	}

	to {
		width: calc(50% - 1rem);
	}
}

@keyframes fadeInUp {
	from {
		opacity: 0;
		translate: 0 20px;
	}

	to {
		opacity: 1;
		translate: 0 0;
	}
}

@keyframes fadeInMenu {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

/* #endregion */
/* #region @prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-delay: 0s !important;
		animation-duration: 0s !important;
		scroll-behavior: auto !important;
		transition-delay: 0s !important;
		transition-duration: 0s !important;
	}

	/* For hero background video */
	video[autoplay] {
		display: none !important;
	}

	.hero {
		background: linear-gradient(to bottom, var(--grey900-70), transparent), url("https://ripcord.sirv.com/Legacy/poster-father-son-shoulders.jpg") center/cover no-repeat !important;
	}
}

/* #endregion */
/* #region Elements */
@view-transition {
	navigation: auto;
}

*, *::before, *::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

a {
	color: var(--green700);
	text-underline-offset: 3px;
	transition: var(--transition);

	&:hover {
		color: var(--green900);
	}
}

body {
	color: var(--grey700);
	font-family: var(--font-sans);
}

button {
	background: none;
	border: none;
	cursor: pointer;
}

h1, h2, h3, h4 {
	text-wrap: balance;
}

hr {
	border: 0;
	border-top: 1px solid var(--grey100);
	margin-block: 3rem;
}

html {
	scroll-behavior: smooth;
	scrollbar-gutter: stable;

	&:has(.nav-contain.open) {
		overflow: hidden;
	}
}

img {
	display: block;
	max-width: 100%;
}

li {
	font-size: var(--fz18);
	margin-left: 1.5em;
	padding: .8em 0 0 .5em;
}

p {
	font-size: var(--fz18);
	line-height: 1.7;
	margin-bottom: 1.2em;
	text-wrap: pretty;
}

sup {
	font-size: var(--fz12);
}

/* #endregion */
/* #region Global */
.back {
	background-color: var(--green100);
	border-radius: var(--radius);
	color: var(--green900);
	display: inline-block;
	font-size: var(--fz12);
	font-weight: 600;
	letter-spacing: 1px;
	margin-bottom: 3rem;
	padding: 1rem;
	text-box: trim-both cap alphabetic;
	text-decoration: none;
	text-transform: uppercase;
	transition: var(--transition);

	&:hover {
		background-color: var(--green700);
		color: white;
	}
}

.brokercheck {
	background-color: var(--grey900-90);
	bottom: 0;
	left: 0;
	padding: 2rem;
	position: fixed;
	width: 100%;
	z-index: 10;

	.grid {
		align-items: center;
		display: grid;
		gap: 1rem;
		grid-template-columns: auto auto;
		justify-content: center;

		p {
			margin: 0;
		}

		.close {
			color: white;
			font-size: var(--fz24);
			line-height: 1;

			@media (width < 1300px) {
				font-size: var(--fz32);
			}
		}
	}
}

.btn {
	background-color: var(--green700);
	border-radius: var(--radius);
	color: white;
	display: inline-block;
	font-size: var(--fz14);
	font-weight: 600;
	letter-spacing: 1px;
	padding: 1.5rem 2rem;
	text-box: trim-both cap alphabetic;
	text-decoration: none;
	text-transform: uppercase;
	transition: var(--transition);

	&:hover {
		background-color: var(--green500);
		color: var(--grey700);
	}
}

.callout {
	background-color: var(--grey100);
	border-left: 5px solid var(--grey300);
	font-size: var(--fz20);
	font-weight: 500;
	margin-bottom: 3rem;
	padding: 2rem 3rem;
}

.content {
	margin-inline: auto;
	width: min(85%, 1300px);
}

.cta {
	background: linear-gradient(to right, var(--grey900-50), var(--grey700)), url("https://ripcord.sirv.com/Legacy/shutterstock_2259811269.jpg?cx=400") center 28%/cover no-repeat;
	color: white;
	padding-block: 8rem 12rem;
	text-align: center;

	h2 {
		font-size: var(--fz32);
		font-weight: 500;
		margin-bottom: 2rem;
		text-wrap: balance;
	}
}

.disclosure p {
	font-size: var(--fz14) !important;
}

.mm {
	display: block;
	margin: 3rem auto 0;
	width: 120px;
}

.separator {
	background-color: var(--grey300);
	height: 4px;
	margin-block: 4rem;
	width: min(20%, 80px);
}

.sidepic {
	float: right;
	margin: 0 0 3rem 3rem;
	width: 400px;

	@media (width < 1200px) {
		float: none;
		margin: 1rem 0;
	}
}

/* #endregion */
/* #region Nav */
.nav-grid {
	display: grid;
	gap: 0;
	grid-auto-flow: column;
	align-items: center;

	@media (width < 1200px) {
		align-content: start;
		align-items: stretch;
		background-color: var(--grey900-90);
		backdrop-filter: blur(8px);
		display: none;
		grid-auto-flow: row;
		height: 100vh;
		justify-content: center;
		padding: 6rem 1rem 0;
		position: absolute;
		right: 0;
		top: 0;
		width: 100vw;
	}

	a {
		border-radius: var(--radius);
		color: var(--green500);
		font-size: var(--fz18);
		font-weight: 500;
		line-height: 1;
		padding: .8rem;
		text-box: trim-both cap alphabetic;
		text-decoration: none;
		transition: var(--transition);

		&::after {
			bottom: -10px;
		}

		@media (width < 1200px) {
			font-size: var(--fz20);
			padding: .8rem;
			translate: 0 2rem;

			&::after {
				display: none;
			}
		}

		&:hover {
			background-color: var(--green700);
			color: white;

			@media (width < 1200px) {
				background-color: transparent;
			}
		}

		&.external::after {
			content: "\f08e";
			display: inline-block;
			font-family: "Font Awesome 7 Pro";
			font-size: var(--fz12);
			margin-left: .4em;
			translate: 0 -2px;
		}
	}
}

.nav-toggle {
	color: white !important;
	display: none;

	@media (width < 1200px) {
		display: block;
		font-size: var(--fz24);
		position: relative;
		text-decoration: none;
		z-index: 20;
	}
}

.open {
	.fa-xmark {
		display: block;
		font-size: var(--fz40);
		rotate: 180deg;
		transition: .5s;
		z-index: 10;
	}

	.nav-grid {
		animation: fadeInMenu .3s ease-out;
		display: grid;
		z-index: 5;

		a,
		button,
		.nav-item-has-dropdown {
			translate: 0;
		}
	}

	.nav-toggle {
		z-index: 20;
	}
}

.nav-item-dropdown {
	display: grid;
	grid-template-rows: auto auto;
	position: relative;

	@media (width < 1200px) {
		align-items: start;
		grid-template-rows: auto auto;
	}
}

.nav-item-has-dropdown {
	border-radius: var(--radius);
	color: var(--green500);
	cursor: pointer;
	display: inline-block;
	font-size: var(--fz18);
	font-weight: 500;
	line-height: 1;
	padding: 1rem;
	text-box: trim-both cap alphabetic;
	text-decoration: none;
	transition: var(--transition);
	user-select: none;

	@media (width < 1200px) {
		font-size: var(--fz20);
		padding: .8rem;
		translate: 0 2rem;
	}

	&:hover {
		background-color: var(--green700);
		color: white;
		cursor: pointer;

		@media (width < 1200px) {
			background-color: transparent;
		}
	}

	i {
		display: inline-block;
		font-size: .75em;
		line-height: 1;
		margin: 0 0 0 .1em;
		padding: 0;
		transition: var(--transition);
		vertical-align: baseline;
	}

	&::after {
		display: none;
	}
}

.nav-dropdown {
	background-color: var(--grey700);
	border-radius: var(--radius);
	display: grid;
	gap: .3rem;
	min-width: 200px;
	opacity: 0;
	padding: 1rem .5rem .5rem;
	pointer-events: none;
	position: absolute;
	top: calc(100% + 8px);
	transition: var(--transition);
	visibility: hidden;
	z-index: 100;

	@media (width < 1200px) {
		background-color: transparent;
		gap: 0;
		max-height: none;
		min-width: unset;
		opacity: 1;
		overflow: visible;
		padding: .5rem 0;
		pointer-events: auto;
		position: static;
		visibility: visible;
	}

	a {
		background-color: transparent;
		border-radius: var(--radius);
		color: var(--green500);
		font-size: var(--fz16);
		font-weight: 400;
		padding: .8rem 1rem;
		text-decoration: none;
		transition: var(--transition);
		white-space: nowrap;

		@media (width < 1200px) {
			font-size: var(--fz18);
			padding: .7rem .8rem;
			padding-left: 2rem;
			translate: 0 2rem;
		}

		&:hover {
			background-color: var(--green700);
			color: white;

			@media (width < 1200px) {
				background-color: transparent;
			}
		}

		&::after {
			display: none;
		}
	}

	button {
		background-color: transparent;
		border-radius: var(--radius);
		color: var(--green500);
		font-family: var(--font-sans);
		font-size: var(--fz16);
		font-weight: 400;
		padding: .6rem 1rem;
		text-align: left;
		text-decoration: none;
		transition: var(--transition);
		white-space: nowrap;
		width: 100%;

		@media (width < 1200px) {
			font-size: var(--fz18);
			padding: .5rem .8rem;
			padding-left: 2rem;
			translate: 0 2rem;
		}

		&:hover {
			background-color: var(--green700);
			color: white;

			@media (width < 1200px) {
				background-color: transparent;
			}
		}
	}

	&::before {
		content: "";
		height: 8px;
		left: 0;
		position: absolute;
		top: -8px;
		width: 100%;

		@media (width < 1200px) {
			display: none;
		}
	}
}

.nav-item-dropdown:hover {
	.nav-dropdown {
		opacity: 1;
		pointer-events: auto;
		visibility: visible;
	}
}

/* #endregion */
/* #region Header */
.header {
	padding-block: 1rem;
	position: fixed;
	width: 100%;
	z-index: 10;

	&.scrolled {
		background-color: var(--grey700);
	}
}

.header-grid {
	align-items: center;
	display: grid;
	gap: 1rem;
	grid-template-columns: auto 1fr;
	justify-items: end;

	.logo {
		transition: var(--transition);
		width: 140px;

		@media (width < 900px) {
			width: 80px;
		}

		&.scrolled {
			width: 80px;
		}
	}
}

/* #endregion */
/* #region Footer */
.footer {
	background: linear-gradient(to bottom, var(--grey900-90), var(--grey900-90)), url("https://ripcord.sirv.com/Legacy/Depositphotos_448582526_XL.jpg") center/cover, var(--grey700);
	color: var(--grey100);
	padding-block: var(--padding-block);

	a {
		color: var(--green500);
		text-decoration: none;

		&:hover {
			text-decoration: underline;
		}
	}

	p {
		font-size: var(--fz14);
	}

	.links {
		font-size: var(--fz14);
		margin-bottom: 1rem;

		a {
			@media (width < 500px) {
				display: block;
			}
		}

		a + a {
			margin-left: 1rem;

			@media (width < 500px) {
				margin: .8rem 0 0;
			}
		}
	}
}

.footer-locations-grid {
	color: white;
	display: grid;
	gap: 1rem 2vw;
	grid-template-columns: repeat(5, auto);
	justify-content: center;
	margin-bottom: 5rem;

	@media (width < 1200px) {
		column-gap: 6vw;
		grid-template-columns: repeat(3, auto);
	}

	@media (width < 900px) {
		column-gap: 6vw;
		grid-template-columns: auto auto;
	}

	@media (width < 500px) {
		grid-template-columns: auto;
	}

	a {
		grid-column: 1/-1;
		justify-self: center;
		text-align: center;

		@media (width < 500px) {
			text-align: left;
		}
	}

	h3 {
		font-size: var(--fz14);
		letter-spacing: 1px;
		margin-bottom: .8rem;
		text-transform: uppercase;
	}
}

/* #endregion */
/* #region Hero */
.hero {
	--hero-animation: slideUp 2s ease both;
	color: white;
	overflow: hidden;
	padding-block: 40vh 30vh;
	position: relative;
	text-align: center;

	@media (width < 500px) {
		padding-top: 20vh;
	}

	&::before {
		background-image: linear-gradient(var(--grey900-70), var(--grey900-50));
		content: "";
		inset: 0;
		position: absolute;
		z-index: 1;
	}

	h1 {
		animation-delay: var(--delay);
		font-size: var(--fz72);
		font-weight: 600;
		letter-spacing: -1px;
		margin-bottom: 1rem;
		text-wrap: balance;

		@media (width < 900px) {
			font-size: var(--fz48);
		}
	}

	p {
		animation-delay: calc(.5s + var(--delay));
		font-size: var(--fz24);
		margin-inline: auto;
		max-width: 65ch;

		span {
			font-weight: 600;
		}
	}

	.btn {
		animation-delay: calc(1s + var(--delay));
	}

	.content > * {
		--delay: 1.5s;
		animation-duration: 1s;
		animation-fill-mode: both;
		animation-name: heroFadeIn;
		position: relative;
		z-index: 2;
	}

	video {
		height: 100%;
		left: 0;
		object-fit: cover;
		position: absolute;
		top: 0;
		width: 100%;
		z-index: 0;
	}
}

/* #endregion */
/* #region Home-Accolades */
.home-accolades {
	padding-block: 5rem;

	.disclosures {
		font-size: var(--fz14);
		text-align: left;
	}
}

.home-accolades-grid {
	display: grid;
	gap: 1rem 3vw;
	grid-template-columns: repeat(3, auto);
	justify-self: center;
	margin-bottom: 1rem;

	@media (width < 900px) {
		grid-template-columns: auto;
	}

	> div {
		text-align: center;
	}

	h2 {
		font-size: var(--fz36);
		font-weight: 600;
		letter-spacing: -1px;
		margin-bottom: 1rem;
	}

	h3 {
		font-size: var(--fz24);
		font-weight: 600;
		margin-top: 1rem;
	}

	h4 {
		margin-block: .4rem;
	}

	img {
		--img-width: 200px;
		margin: 0 auto 1.5rem;
		width: var(--img-width);

		@media (width < 500px) {
			--img-width: 140px;
		}
	}

	p {
		line-height: 1.4;
	}

	.forbes img {
		width: calc(.8 * var(--img-width));
	}
}

/* #endregion */
/* #region Home-Intro */
.home-intro {
	background: linear-gradient(white, var(--grey100));
	padding-bottom: 8rem;

	h2 {
		font-size: var(--fz32);
		font-weight: 600;
		margin-block: 4rem 1rem;
		text-wrap: balance;
	}

	p {
		font-size: var(--fz20);
		font-weight: 300;
	}
}

.home-intro-grid {
	display: grid;
	gap: 5vw;
	grid-template-columns: auto 60%;

	@media (width < 900px) {
		grid-template-columns: auto;
	}

	figure {
		font-size: var(--fz36);
		font-weight: 300;
		margin-block: 3rem;
		position: relative;
	}

	figcaption {
		font-size: var(--fz16);
		margin-top: 1rem;
	}

	img {
		border: 10px solid white;
		min-height: 400px;
		object-fit: cover;
		position: relative;
		top: -3rem;
		z-index: 2;

		@media (width < 900px) {
			display: none;
		}
	}
}

.home-intro-infographic img {
	margin: 5rem auto 0;
	width: max-content;
}

/* #endregion */
/* #region Sub */
.sub {
	padding-block: 3rem 5rem;

	h3 {
		font-size: var(--fz32);
		font-weight: 600;
		margin-bottom: 1rem;
	}

	h4 {
		font-size: var(--fz20);
		font-weight: 600;
		margin-block: 2em .3em;
	}

	p:has(+ ul) {
		margin-bottom: .5rem;
	}
}

.subheader {
	background: url("https://ripcord.sirv.com/Legacy/logo-white.png?opacity=10") 80%/max(600px, 50%) no-repeat, linear-gradient(to right, var(--grey700), var(--grey500)), var(--grey900);
	padding-block: 3rem;

	a {
		background-color: transparent;
		color: var(--green500);
		font-weight: 700;
		margin-left: .3rem;
		padding: .4rem;
		text-decoration: none;
	}

	a:hover {
		background-color: var(--green500);
		color: var(--grey700);
	}

	h2 {
		color: white;
		font-size: var(--fz32);
		font-weight: 400;
		line-height: 1.5;
		max-width: 60ch;
		text-wrap: pretty;
	}

	h2 + div {
		color: var(--grey300);
		font-size: var(--fz14);
		letter-spacing: 1px;
		margin-top: .7rem;
		text-transform: uppercase;
	}
}

.subhero {
	background: linear-gradient(to bottom, var(--grey900-90), var(--grey900-30)), var(--subhero-page-bg) center/cover;
	min-height: 50vh;
	padding-top: 25vh;
	text-align: center;

	h1 {
		color: white;
		font-size: var(--fz36);
		font-weight: 600;
		letter-spacing: 1vw;
		text-transform: uppercase;

		@media (width < 500px) {
			font-size: var(--fz20);
		}
	}

	&.accolades {
		--subhero-page-bg: url("https://ripcord.sirv.com/Legacy/shutterstock_1123630679.jpg");
	}

	&.careers {
		--subhero-page-bg: url("https://ripcord.sirv.com/Legacy/iStock-961269436.jpg?ch=1100");
	}

	&.community {
		--subhero-page-bg: url("https://ripcord.sirv.com/Legacy/shutterstock_1653122146.jpg?cx=200");
	}

	&.contact {
		--subhero-page-bg: url("https://ripcord.sirv.com/Legacy/shutterstock_154635344.jpg?ch=1500");
	}

	&.insights {
		--subhero-page-bg: url("https://ripcord.sirv.com/Legacy/shutterstock_2140347409.jpg?ch=1000");
	}

	&.our-story {
		--subhero-page-bg: url("https://ripcord.sirv.com/Legacy/shutterstock_1116853385.jpg");
	}

	&.services {
		--subhero-page-bg: url("https://ripcord.sirv.com/Legacy/iStock-1167746345.jpg?ch=1400");
	}

	&.team {
		--subhero-page-bg: url("https://ripcord.sirv.com/Legacy/iStock-587510576.jpg?ch=1200");
	}
}

/* #endregion */
/* #region Sub-Accolades */
.sub-accolades-grid {
	--col-min-width: 300px;
	display: grid;
	gap: 1rem 3vw;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--col-min-width)), auto));
	margin-top: 3rem;

	h4 {
		font-size: var(--fz18);
		margin-top: 0;
	}

	p {
		font-size: var(--fz14);
	}
}

/* #endregion */
/* #region Sub-Careers */
.sub-careers h4 {
	margin-block: .5rem 1rem;
}

/* #endregion */
/* #region Sub-Community */
.sub-community-charity-grid {
	--col-min-width: 150px;
	display: grid;
	gap: 1rem 2vw;
	grid-template-columns: repeat(auto-fill, minmax(var(--col-min-width), 1fr));
	justify-items: center;
	margin-top: 2rem;
	text-align: center;

	img {
		aspect-ratio: 3/2;
		object-fit: contain;
		max-width: var(--col-min-width);
	}
}

/* #endregion */
/* #region Sub-Contact */
.sub-contact-grid {
	display: grid;
	gap: 4rem 3vw;
	grid-template-columns: repeat(auto-fit, minmax(300px, 600px));
	justify-content: center;

	@media (width < 1200px) {
		grid-template-columns: auto auto;
	}

	@media (width < 500px) {
		grid-template-columns: auto;
	}

	h3 {
		font-size: var(--fz24);
		margin-bottom: .3rem;
	}

	iframe {
		aspect-ratio: 3/2;
		width: 100%;
	}

	p {
		font-size: var(--fz16);
	}
}

/* #endregion */
/* #region Sub-Insights */
.sub-insights-grid {
	display: grid;
	grid-template-columns: 220px auto;
	justify-content: start;
	margin-top: 3rem;

	@media (width < 500px) {
		grid-template-columns: 250px;
		justify-content: center;
	}

	a {
		border: 2px solid var(--green500);
		position: relative;
		translate: 0 -1rem;
		transition: var(--transition);

		@media (width < 500px) {
			translate: 0;
		}

		&:hover {
			box-shadow: 2px 2px 4px 2px var(--grey100);
			opacity: 1;
			scale: 1.05;

			+ div {
				background: linear-gradient(to bottom, var(--green100), white);
			}
		}
	}

	> div {
		background: linear-gradient(to bottom, var(--grey100), white);
		padding: 2rem;
	}

	h3 {
		font-size: var(--fz20);
		margin-block: 0 .3em;
	}

	p {
		font-size: var(--fz16);
		line-height: 1.4;
	}
}

/* #endregion */
/* #region Sub-Our-Story */
.sub-our-story-headshots-grid {
	display: grid;
	gap: 1.5rem;
	grid-template-columns: repeat(5, auto);
	justify-content: start;
	text-align: center;

	@media (width < 1300px) {
		grid-template-columns: repeat(3, auto);
	}

	@media (width < 900px) {
		grid-template-columns: auto auto;
	}

	@media (width < 500px) {
		grid-template-columns: auto;
		justify-content: center;
	}

	h4 {
		font-size: var(--fz16);
		margin-top: .5em;
	}

	img {
		background-color: var(--grey100);
		max-width: 200px;
	}
}

.sub-our-story-icons-grid {
	background-color: var(--grey100);
	display: grid;
	gap: 1rem 5vw;
	grid-template-columns: repeat(3, 1fr);
	margin-block: 3rem;
	padding: 3rem;
	text-align: center;

	@media (width < 900px) {
		grid-template-columns: auto;
	}

	h4 {
		font-size: var(--fz20);
		letter-spacing: 3px;
		margin-block: 1rem;
		text-transform: uppercase;
	}

	i {
		font-size: var(--fz40);
	}

	p {
		font-weight: 600;
		line-height: 1.4;
		margin-bottom: .5rem;
	}
}

/* #endregion */
/* #region Sub-Team */
.sub-team-bio-grid {
	display: grid;
	gap: 2rem 3rem;
	grid-template-columns: 300px 1fr;

	@media (width < 900px) {
		grid-template-columns: auto;
	}

	.bio-card {
		display: contents;
	}

	.headshot {
		grid-column: 1;
		grid-row: 1/3;

		img {
			background: linear-gradient(to bottom, var(--grey700), var(--grey500) 30%);
			border-radius: var(--radius);
			width: 300px;
		}
	}

	.titleblock {
		grid-column: 2;

		@media (width < 900px) {
			grid-column: 1;
		}

		a:has(img) {
			display: block;
			overflow: hidden;
			margin-bottom: 1.2rem;
		}

		a + a {
			margin-left: .2rem;
		}

		p {
			font-size: var(--fz16);
			line-height: 1.2;
			margin-bottom: .6rem;
		}

		.name {
			font-size: var(--fz32);
			font-weight: 600;
			margin-block: .3rem .5rem;
		}

		.title {
			font-size: var(--fz18);
			font-weight: 600;
			letter-spacing: 1px;
			text-transform: uppercase;
		}
	}

	.text {
		grid-column: 2;

		@media (width < 900px) {
			grid-column: 1;
		}

		p {
			font-size: var(--fz18);
		}

		.quote {
			border-left: 3px solid var(--grey100);
			padding-left: 1.7rem;

			p {
				font-size: var(--fz20);
				font-weight: 300;
				line-height: 1.4;
				margin-bottom: .5rem;

				&:last-of-type {
					font-size: var(--fz16);
					margin: 0 0 2rem .5rem;
				}
			}
		}
	}
}

.sub-team-locations {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: .7rem;
	margin-bottom: 3rem;

	button {
		background-color: var(--grey100);
		border-radius: var(--radius);
		color: var(--grey900);
		font-weight: 500;
		letter-spacing: 1px;
		padding: 1.3rem;
		text-box: trim-both cap alphabetic;
		text-transform: uppercase;
		transition: var(--transition);

		&:hover {
			background-color: var(--green300);
		}

		&.active {
			background-color: var(--green700);
			color: white;
		}
	}
}

.sub-team-grid {
	--col-min-width: 240px;
	display: grid;
	gap: 3rem 1rem;
	grid-template-columns: repeat(auto-fit, var(--col-min-width));
	justify-content: start;
	margin-block: 2rem 4rem;

	.bio-card {
		display: grid;
		gap: 1rem;
		grid-template-rows: auto 1fr;
	}

	a + a {
		margin-left: .2rem;
	}

	a:has(img) {
		align-self: start;
		background: linear-gradient(to bottom, var(--grey700), var(--grey500) 30%);
		border-radius: var(--radius);
		display: grid;
		place-items: start end;
		position: relative;
		transition: var(--transition);
		width: var(--col-min-width);

		&:hover {
			&::after {
				opacity: 1;
			}
		}

		&::after {
			background-color: var(--green700);
			border-bottom-left-radius: var(--radius);
			border-top-right-radius: var(--radius);
			color: white;
			content: "View Bio";
			font-size: var(--fz12);
			letter-spacing: 1px;
			opacity: 0;
			padding: .8em 1.5em;
			position: absolute;
			text-transform: uppercase;
			transition: var(--transition);
		}
	}

	img {
		border-radius: var(--radius);
		width: var(--col-min-width);
	}

	p {
		line-height: 1.4;
		margin-bottom: 0;
	}

	.name {
		font-size: var(--fz20);
		font-weight: 600;
	}

	.phone {
		font-size: var(--fz14);
		margin-bottom: .7rem;
	}

	.title {
		font-size: var(--fz14);
		font-weight: 600;
	}
}

/* #endregion */
/* #region Timeline */
.timeline {
	margin-block: 4rem;
	padding-block: 4rem;
	position: relative;
}

.timeline-connector {
	animation: .5s both;
	background-color: var(--green700);
	height: 4px;
	opacity: 0;
	position: absolute;
	top: calc(1rem - 2px);
	width: 0;
	z-index: 1;

	@media (width < 900px) {
		display: none;
	}
}

.timeline-content {
	position: relative;
	width: calc(50% - 150px);

	a img {
		background-color: var(--grey500);
		width: 150px;
	}

	h4,
	img,
	p {
		animation: .6s both;
		opacity: 0;
	}

	h4 {
		color: var(--grey900);
		font-size: var(--fz24);
		margin-bottom: .7rem;
		padding-top: 2.2rem;

		&:nth-of-type(2) {
			margin-top: 1.5rem;
			padding-top: 0;
		}

		@media (width < 900px) {
			margin-top: 1.5rem;
			padding-top: 0;
		}
	}

	img {
		border-radius: var(--radius);
		margin-top: 1rem;
		width: 200px;
	}

	p {
		color: var(--grey700);
		line-height: 1.5;
		margin-bottom: 0;
	}

	@media (width < 900px) {
		margin-left: 0;
		margin-top: 0;
		padding-left: 0;
		width: 100%;
	}
}

.timeline-date {
	animation: .6s both;
	background-color: var(--green700);
	border-radius: .3rem;
	color: white;
	display: inline-block;
	font-size: var(--fz24);
	font-weight: 700;
	opacity: 0;
	padding: .5rem 1rem;
	position: absolute;
	top: 0;
	z-index: 3;

	@media (width < 900px) {
		display: inline-block;
		font-size: var(--fz18);
		left: 0;
		margin-bottom: .5rem;
		padding: .5rem 1rem;
		position: relative;
		top: 1rem;
	}
}

.timeline-line {
	background: linear-gradient(to bottom,
			transparent 0%,
			var(--green700) 10%,
			var(--green700) 90%,
			transparent 100%);
	height: 100%;
	left: 50%;
	position: absolute;
	top: 0;
	translate: -50% 0;
	width: 4px;

	@media (width < 900px) {
		left: 0;
	}
}

.timeline-milestone {
	margin-bottom: 4rem;
	position: relative;

	&:last-child {
		margin-bottom: 0;
	}

	&.left .timeline-connector {
		right: calc(50% + 1rem);
	}

	&.left .timeline-content {
		margin-left: 0;
		margin-right: auto;
		text-align: left;

		@media (width < 900px) {
			margin-right: 0;
			text-align: left;
		}
	}

	&.left .timeline-date {
		left: calc(50% + 2rem);

		@media (width < 900px) {
			left: 0;
		}
	}

	&.left.visible {
		@media (width < 900px) {
			padding-top: 0;
		}
	}

	&.left.visible .timeline-connector {
		animation: .5s .6s both drawLineLeft;
		opacity: 1;
	}

	&.right .timeline-connector {
		left: calc(50% + 1rem);
	}

	&.right .timeline-content {
		margin-left: auto;
		margin-right: 0;
		text-align: right;

		img {
			margin-left: auto;

			@media (width < 900px) {
				margin-left: 0;
			}
		}

		@media (width < 900px) {
			margin-right: 0;
			text-align: left;
		}
	}

	&.right .timeline-date {
		right: calc(50% + 2rem);

		@media (width < 900px) {
			left: 0;
			right: auto;
		}
	}

	&.right.visible {
		@media (width < 900px) {
			padding-top: 0;
		}
	}

	&.right.visible .timeline-connector {
		animation: .5s .6s both drawLineRight;
		opacity: 1;
	}

	&.visible .timeline-content h4 {
		animation: .6s .8s both fadeInUp;
	}

	&.visible .timeline-content img {
		animation: .6s 1.1s both fadeInUp;
	}

	&.visible .timeline-content p {
		animation: .6s .95s both fadeInUp;
	}

	&.visible .timeline-date {
		animation: .6s .2s both fadeInUp;
	}

	&.visible .timeline-node {
		animation-name: nodeGrow;
	}

	@media (width < 900px) {
		margin-bottom: 4rem;
		padding-left: 3rem;
		padding-top: 1.5rem;
	}
}

.timeline-node {
	animation: .6s both;
	animation-timing-function: cubic-bezier(.68, -.55, .27, 1.55);
	background-color: var(--green700);
	border: 4px solid var(--grey100);
	border-radius: 50%;
	height: 2rem;
	left: 50%;
	opacity: 0;
	position: absolute;
	top: 0;
	translate: -50% 0;
	width: 2rem;
	z-index: 2;

	@media (width < 900px) {
		left: 0;
		top: 1rem;
	}
}

/* #endregion */