/* #region @-rules */
@keyframes marquee {
	from {
		translate: 0 0;
	}

	to {
		translate: -50% 0;
	}
}

@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;
	}
}

@view-transition {
	navigation: auto;
}

/* #endregion */
/* #region Elements */
*, *::before, *::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

a {
	color: var(--blue500);
	transition: var(--transition);
}

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

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

h1, h2, h3 {
	line-height: 1.2;
	margin-bottom: var(--px12);
	text-wrap: balance;
}

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

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

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

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

sup {
	display: inline-block;
	font-size: var(--fz10);
	translate: var(--px02) -4px;
}

/* #endregion */
/* #region Global */
.btn {
	--btn-bg: white;
	--btn-bg-hover: var(--green100);
	--btn-color: var(--blue700);
	background: var(--btn-bg);
	border: var(--btn-border, none);
	border-radius: var(--radius);
	color: var(--btn-color);
	cursor: pointer;
	display: inline-block;
	font-family: var(--font-sans);
	font-weight: 500;
	letter-spacing: .5px;
	padding: var(--px12) var(--px32);
	text-decoration: none;
	transition: var(--transition);

	&:hover {
		background: var(--btn-bg-hover);
		color: var(--btn-color-hover, var(--btn-color));
		translate: 0 -2px;
	}

	&.btn-dark {
		--btn-bg: var(--blue700);
		--btn-bg-hover: var(--blue600);
		--btn-color: white;
	}

	&.btn-outline {
		--btn-bg: transparent;
		--btn-bg-hover: white;
		--btn-border: var(--px01) solid white;
		--btn-color: white;
		--btn-color-hover: var(--blue700);
	}
}

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

.cta {
	background: var(--blue700);
	background-image:
		radial-gradient(ellipse 80% 100% at 50% -10%, var(--blue300-50), transparent),
		radial-gradient(ellipse 55% 60% at 100% 130%, var(--green400-30), transparent);
	overflow: hidden;
	padding: var(--px80) var(--px32);
	position: relative;
	text-align: center;

	.content {
		position: relative;
		z-index: 10;

		h2 {
			color: white;
			font-family: var(--font-serif);
			font-size: var(--fz32);
			font-weight: 400;
		}

		p {
			color: white;
			font-size: var(--fz18);
			font-weight: 300;
			margin-top: var(--px16);
		}

		.btn {
			margin-top: var(--px20);
		}
	}

	.rings {
		inset: 0;
		pointer-events: none;
		position: absolute;

		.ring {
			aspect-ratio: 1;
			border: var(--px01) solid var(--ring-color);
			border-radius: 50%;
			left: 50%;
			position: absolute;
			top: 50%;
			translate: -50% -50%;

			&:nth-child(1) {
				--ring-color: var(--blue300);
				width: 30rem;
			}

			&:nth-child(2) {
				--ring-color: var(--blue400);
				width: 40rem;
			}

			&:nth-child(3) {
				--ring-color: var(--blue500);
				width: 55rem;
			}
		}
	}
}

.fade-in {
	opacity: 0;
	transition: var(--transition);
	translate: 0 var(--px20);

	&.visible {
		opacity: 1;
		translate: 0 0;
	}
}

.first-letter::first-letter {
	color: var(--blue500);
	float: left;
	font-family: var(--font-serif);
	font-size: var(--fz72);
	font-weight: 400;
	line-height: .8;
	margin-right: var(--px08);
	padding-top: var(--px02);
}

.marquee {
	background: var(--blue800);
	overflow: hidden;
	padding: var(--px12) 0;

	.marquee-text {
		animation: marquee 32s linear infinite;
		display: flex;
		user-select: none;
		white-space: nowrap;
		width: max-content;

		span {
			color: var(--blue300);
			font-size: var(--fz12);
			font-weight: 500;
			letter-spacing: var(--px02);
			padding: 0 var(--px28);
			text-transform: uppercase;

			&:nth-child(even) {
				color: var(--blue300);
			}
		}
	}
}

.skip {
	background-color: var(--blue700);
	color: white;
	left: var(--px16);
	padding: var(--px08) var(--px16);
	position: absolute;
	text-decoration: none;
	top: -100%;

	&:focus {
		top: var(--px16);
	}

	&:hover::after {
		width: 0;
	}
}

.stagger > * {
	opacity: 0;
	translate: 0 var(--px16);

	&.visible {
		opacity: 1;
		translate: 0 0;
	}
}

/* #endregion */
/* #region Header */
.header {
	background-color: white;
	border-bottom: var(--px01) solid var(--blue500);
	box-shadow: var(--px02) var(--px02) var(--px08) var(--px08) var(--blue700-10);
	padding-block: var(--px16);
	position: fixed;
	width: 100%;
	z-index: 20;
}

.nav {
	display: flex;
	gap: var(--px32) var(--px28);

	@media (width < 1300px) {
		--mobile-menu-width: 60vw;
		align-items: center;
		backdrop-filter: blur(var(--px04));
		background-color: var(--blue900-90);
		flex-direction: column;
		height: 100vh;
		justify-content: start;
		padding-top: var(--px96);
		position: absolute;
		right: 0;
		top: 0;
		transition: var(--transition);
		translate: var(--mobile-menu-width);
		visibility: hidden;
		width: var(--mobile-menu-width);
	}

	@media (width < 600px) {
		--mobile-menu-width: 100vw;
	}

	a {
		color: var(--blue900-70);
		font-weight: 500;
		position: relative;
		text-decoration: none;
		transition: var(--transition);

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

		&::after {
			background-color: var(--blue500);
			bottom: -4px;
			content: "";
			height: var(--px02);
			left: 0;
			position: absolute;
			scale: 0 1;
			transition: var(--transition);
			width: 100%;
		}

		&:hover {
			color: var(--blue500);

			&::after {
				scale: 1;
			}
		}
	}
}

.nav-dropdown {
	position: relative;

	@media (width < 1300px) {
		align-items: center;
		display: flex;
		flex-direction: column;
		gap: 0;
		margin-bottom: -16px;
		width: 100%;
	}

	> a {
		align-items: center;
		display: flex;
		gap: var(--px06);
	}

	&:hover .nav-dropdown-menu,
	&:focus-within .nav-dropdown-menu {
		opacity: 1;
		pointer-events: auto;
		translate: -50% 0;
		visibility: visible;

		@media (width < 1300px) {
			max-height: 200px;
			translate: 0;
		}
	}

	&:hover .nav-dropdown-chevron,
	&:focus-within .nav-dropdown-chevron {
		rotate: 180deg;
	}
}

.nav-dropdown-chevron {
	font-size: var(--fz10);
	transition: var(--transition);

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

.nav-dropdown-menu {
	background-color: white;
	border-bottom: var(--px02) solid var(--blue500);
	border-radius: 0 0 var(--radius) var(--radius);
	box-shadow: 0 var(--px08) var(--px16) var(--black-10);
	display: flex;
	flex-direction: column;
	gap: 0;
	left: 50%;
	min-width: 200px;
	opacity: 0;
	padding-block: var(--px08);
	padding-top: var(--px24);
	pointer-events: none;
	position: absolute;
	top: 100%;
	transition: opacity var(--transition), translate var(--transition), visibility var(--transition);
	translate: -50% var(--px08);
	visibility: hidden;

	@media (width < 1300px) {
		background-color: transparent;
		box-shadow: none;
		border: none;
		max-height: none;
		opacity: 1;
		overflow: visible;
		padding-block: 0;
		padding-top: var(--px12);
		pointer-events: auto;
		position: static;
		translate: 0;
		visibility: visible;
		width: 100%;
	}

	a {
		color: var(--blue900-70);
		font-size: var(--fz14);
		padding: var(--px10) var(--px20);
		white-space: nowrap;

		@media (width < 1300px) {
			color: var(--white-70);
			font-size: var(--fz18);
			padding: var(--px10) 0;
			text-align: center;
		}

		&::after {
			display: none;
		}

		&:hover {
			background-color: var(--blue050);
			color: var(--blue500);

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

.nav-flex {
	--logo-width: 250px;
	align-items: center;
	display: flex;
	gap: var(--px32);
	justify-content: space-between;

	.logo {
		img {
			transition: var(--transition);
			width: var(--logo-width);
		}

		&.scrolled {
			img {
				width: calc(var(--logo-width) * .75);
			}
		}
	}
}

.nav-login {
	font-size: var(--fz14);
	letter-spacing: var(--px01);
	text-transform: uppercase;
}

.nav-login--header {
	color: var(--blue900-70);
	font-weight: 500;
	position: absolute;
	right: var(--px32);
	text-decoration: none;
	top: 50%;
	transition: var(--transition);
	translate: 0 -50%;

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

	&::after {
		background-color: var(--blue500);
		bottom: -4px;
		content: "";
		height: var(--px02);
		left: 0;
		position: absolute;
		scale: 0 1;
		transition: var(--transition);
		width: 100%;
	}

	&:hover {
		color: var(--blue500);

		&::after {
			scale: 1;
		}
	}
}

.nav-login--mobile {
	display: none;

	@media (width < 1300px) {
		display: inline;
	}
}

.nav-open {
	.nav {
		translate: 0;
		visibility: visible;

		a {
			color: white;
		}
	}
}

.nav-toggle {
	display: none;
	transition: var(--transition);

	@media (width < 1300px) {
		color: var(--blue500);
		display: block;
		font-size: var(--fz24);
		justify-self: end;
		position: relative;
		z-index: 10;
	}

	.fa-xmark-large {
		display: none;
	}

	.nav-open & {
		rotate: 180deg;

		.fa-bars {
			display: none;
		}

		.fa-xmark-large {
			color: white;
			display: block;
		}
	}
}

/* #endregion */
/* #region Footer */
.footer {
	background: var(--blue950);
	padding-block: var(--px64);

	a {
		color: var(--blue300);

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

.footer-legal {
	align-items: start;
	color: var(--white-50);
	display: flex;
	flex-wrap: wrap;
	gap: var(--px32) 8vw;
	justify-content: space-between;

	.disclaimer {
		flex: 1 45ch;

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

	.links {
		align-items: center;
		display: flex;
		flex-wrap: wrap;
		gap: var(--px20);

		a {
			text-decoration: none;
		}

		.legal {
			display: flex;
			gap: var(--px16);

			a {
				font-size: var(--fz12);
				text-transform: uppercase;
			}
		}

		.social {
			border-left: var(--px01) solid var(--white-10);
			display: flex;
			gap: var(--px08);
			padding-left: var(--px16);

			a {
				font-size: var(--px20);
			}

			@media (width < 500px) {
				border-left: 0;
				padding-left: 0;
			}
		}
	}
}

.footer-offices {
	border-bottom: var(--px01) solid var(--white-10);
	display: flex;
	flex-wrap: wrap;
	gap: var(--px40) max(var(--px64), 8vw);
	margin-bottom: var(--px40);
	padding-bottom: var(--px40);

	.address {
		color: var(--white-50);
		font-size: var(--fz12);
		font-style: normal;
		font-weight: 300;
		line-height: 1.7;
	}

	.city {
		color: var(--blue100);
		font-size: var(--fz12);
		font-weight: 500;
		letter-spacing: var(--px01);
		margin-bottom: var(--px12);
		text-transform: uppercase;
	}
}

/* #endregion */
/* #region Home */
.hero {
	align-items: center;
	display: flex;
	min-height: 100vh;
	overflow: hidden;
	position: relative;

	.hero-bg {
		inset: 0;
		position: absolute;
		z-index: 0;

		.hero-overlay {
			background: linear-gradient(to bottom, var(--blue900-50), var(--blue900-70));
			inset: 0;
			position: absolute;
			z-index: 10;
		}

		.hero-video {
			height: 100%;
			object-fit: cover;
			width: 100%;
		}
	}

	.hero-actions {
		display: flex;
		flex-wrap: wrap;
		gap: var(--px16);
	}

	.hero-content {
		padding-block: var(--px160) var(--px128);
		position: relative;
		text-align: left;
		z-index: 10;

		h1 {
			color: var(--white-90);
			font-family: var(--font-serif);
			font-size: var(--fz72);
			font-weight: 400;
			line-height: 1.2;
			margin-bottom: var(--px16);
			max-width: 20ch;
		}

		p {
			color: var(--white-70);
			font-size: var(--fz20);
			font-weight: 300;
			margin-bottom: var(--px32);
			max-width: 50ch;
		}

		.pill {
			backdrop-filter: blur(var(--px04));
			background: var(--white-10);
			border: var(--px01) solid var(--white-30);
			border-radius: var(--radius-pill);
			color: var(--white-90);
			display: inline-block;
			font-size: var(--fz12);
			font-weight: 700;
			letter-spacing: var(--px04);
			margin-bottom: var(--px24);
			padding: var(--px08) var(--px20);
			text-transform: uppercase;
		}
	}
}

.home {
	padding-block: var(--px80);

	h2 {
		font-family: var(--font-serif);
		font-size: var(--fz32);
		font-weight: 400;
		margin-bottom: var(--px24);
	}

	.eyebrow {
		align-items: center;
		color: var(--blue500);
		display: flex;
		font-size: var(--fz12);
		font-weight: 600;
		gap: var(--px10);
		letter-spacing: var(--px02);
		margin-bottom: var(--px10);
		text-transform: uppercase;

		&::before {
			background: currentColor;
			content: "";
			display: inline-block;
			flex-shrink: 0;
			height: var(--px02);
			width: var(--px20);
		}
	}
}

/* #endregion */
/* #region Home-Intro */
.home-intro {
	background: white;

	.home-intro-grid {
		align-items: start;
		display: grid;
		gap: var(--px64);
		grid-template-columns: 1fr 1fr;

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

	.home-intro-quote {
		blockquote {
			border-left: var(--px03) solid var(--blue500);
			color: var(--blue700);
			font-family: var(--font-serif);
			font-size: var(--fz24);
			font-weight: 400;
			line-height: 1.6;
			padding-left: var(--px32);
			text-wrap: balance;
		}
	}

	.home-intro-text {
		h2 {
			font-size: var(--fz40);
			max-width: 20ch;
		}

		p {
			color: var(--blue900-70);
			margin-bottom: var(--px32);
			max-width: 55ch;
		}
	}

	.home-office-dot {
		background: var(--blue300);
		border-radius: 50%;
		flex-shrink: 0;
		height: var(--px06);
		width: var(--px06);
	}

	.home-offices {
		align-items: center;
		color: var(--blue900-50);
		display: flex;
		flex-wrap: wrap;
		font-size: var(--fz14);
		font-weight: 500;
		gap: var(--px12);
		letter-spacing: var(--px01);
		margin-top: var(--px32);
		padding-left: var(--px32);
		text-transform: uppercase;
	}
}

/* #endregion */
/* #region Home-Services */
.home-services {
	background:
		linear-gradient(var(--blue950-80), var(--blue950-80)),
		url("https://ripcord.sirv.com/Cahaba/office-table-empty-02.jpg") center/cover no-repeat,
		var(--blue950);

	h2 {
		color: white;
	}

	.eyebrow {
		color: var(--blue300);
	}
}

.home-services-card-grid {
	--card-min-width: 400px;
	display: grid;
	gap: var(--px24);
	grid-template-columns: repeat(auto-fit, minmax(var(--card-min-width), 1fr));
	margin-top: var(--px40);

	.card {
		background:
			radial-gradient(ellipse 120% 80% at var(--card-glow-pos), var(--green400-30), transparent),
			linear-gradient(145deg, var(--card-grad-from), var(--card-grad-to));
		border: var(--px01) solid var(--card-border);
		border-radius: var(--radius-lg);
		color: white;
		display: flex;
		flex-direction: column;
		min-height: 400px;
		overflow: hidden;
		padding: var(--px40);
		text-decoration: none;
		transition: var(--transition);

		&:hover {
			translate: 0 -3px;

			.link i {
				translate: var(--px06) 0;
			}
		}

		h3 {
			font-family: var(--font-sans);
			font-size: var(--fz24);
			font-weight: 500;
			margin-bottom: var(--px16);
		}

		p {
			color: var(--white-70);
			flex: 1;
			font-size: var(--fz16);
			font-weight: 300;
			line-height: 1.7;
			margin-bottom: var(--px32);
		}

		&.card--financial-planning {
			--card-border: var(--blue500);
			--card-glow-pos: bottom left;
			--card-grad-from: var(--blue600);
			--card-grad-to: var(--blue900);
		}

		&.card--investment-management {
			--card-border: var(--blue700);
			--card-glow-pos: top right;
			--card-grad-from: var(--blue800);
			--card-grad-to: var(--blue950);
		}

		.icon {
			align-items: center;
			background: var(--white-10);
			border: var(--px01) solid var(--white-30);
			border-radius: var(--radius);
			color: var(--blue100);
			display: flex;
			font-size: var(--fz24);
			height: var(--px48);
			justify-content: center;
			margin-bottom: var(--px24);
			width: var(--px48);
		}

		.link {
			align-items: center;
			color: var(--blue100);
			display: flex;
			font-size: var(--fz14);
			font-weight: 600;
			gap: var(--px08);
			letter-spacing: var(--px01);

			i {
				font-size: var(--fz12);
				transition: var(--transition);
			}
		}
	}
}

/* #endregion */
/* #region Home-Who */
.home-who {
	background: var(--blue050);

	.home-who-grid {
		display: grid;
		gap: var(--px20);
		grid-template-columns: repeat(4, 1fr);
		margin-top: var(--px40);

		@media (width < 1000px) {
			grid-template-columns: repeat(2, 1fr);
		}

		@media (width < 600px) {
			grid-template-columns: 1fr;
		}
	}
}

.home-who-card {
	background: white;
	border-radius: var(--radius-lg);
	box-shadow: 0 var(--px01) var(--px08) var(--blue700-10);
	color: var(--blue900);
	display: block;
	padding: var(--px32);
	text-decoration: none;
	transition: var(--transition);

	&:hover {
		box-shadow: 0 var(--px08) var(--px24) var(--blue300-50);
		translate: 0 -4px;
	}

	h3 {
		font-family: var(--font-sans);
		font-size: var(--fz20);
		font-weight: 500;
		margin-bottom: var(--px12);
	}

	i {
		color: var(--blue500);
		font-size: var(--fz32);
		margin-bottom: var(--px16);
	}

	p {
		color: var(--blue900-70);
		font-size: var(--fz14);
		font-weight: 300;
		line-height: 1.6;
		margin: 0;
	}
}

/* #endregion */
/* #region Home-Why */
.home-pillar {
	background: var(--white-10);
	border: var(--px01) solid var(--white-10);
	border-radius: var(--radius-lg);
	padding: var(--px24);
	transition: var(--transition);

	&:hover {
		border-color: var(--blue300);
	}

	h4 {
		color: var(--white-90);
		font-size: var(--fz16);
		font-weight: 600;
		margin-bottom: var(--px08);
	}

	p {
		color: var(--white-50);
		font-size: var(--fz14);
		font-weight: 300;
		line-height: 1.6;
		margin: 0;
	}

	.home-pillar-icon {
		align-items: center;
		background: var(--blue700-50);
		border-radius: var(--radius);
		color: var(--blue200);
		display: flex;
		font-size: var(--fz20);
		height: var(--px40);
		justify-content: center;
		margin-bottom: var(--px16);
		width: var(--px40);
	}
}

.home-why {
	background: var(--blue900);

	.eyebrow {
		color: var(--blue300);
	}

	.home-why-grid {
		align-items: start;
		display: grid;
		gap: var(--px64);
		grid-template-columns: 1fr 1fr;

		@media (width < 1000px) {
			grid-template-columns: 1fr;
		}
	}

	.home-why-pillars {
		display: grid;
		gap: var(--px20);
		grid-template-columns: repeat(2, 1fr);

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

	.home-why-text {
		h2 {
			color: white;
			font-size: var(--fz40);
			max-width: 18ch;
		}

		p {
			color: var(--white-70);
			margin-bottom: var(--px32);
			max-width: 50ch;
		}
	}
}

/* #endregion */
/* #region Sub */
.sub {
	padding-block: var(--px80);

	h2 {
		font-family: var(--font-serif);
		font-size: var(--fz32);
		font-weight: 400;
		margin-bottom: var(--px24);
	}

	.eyebrow {
		align-items: center;
		color: var(--blue500);
		display: flex;
		font-size: var(--fz12);
		font-weight: 600;
		gap: var(--px10);
		letter-spacing: var(--px02);
		margin-bottom: var(--px10);
		text-transform: uppercase;

		&::before {
			background: currentColor;
			content: "";
			display: inline-block;
			flex-shrink: 0;
			height: var(--px02);
			width: var(--px20);
		}
	}
}

.sub-quote-grid {
	--divider-spacing: var(--px64);
	align-items: start;
	display: grid;
	gap: var(--px16) var(--divider-spacing);
	grid-template-columns: 60ch auto;

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

	.quote {
		border-left: var(--px03) solid currentColor;
		color: var(--blue500);
		font-family: var(--font-serif);
		font-size: var(--fz28);
		line-height: 1.5;
		padding-left: var(--divider-spacing);
		text-wrap: balance;
	}
}

.subhero {
	align-items: center;
	background: linear-gradient(to bottom, var(--blue900-50), var(--blue900-70)), var(--subhero-bg) center top/cover no-repeat;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding-block: 16rem 12rem;
	position: relative;
	text-align: center;

	h1 {
		color: var(--white-90);
		font-family: var(--font-serif);
		font-size: var(--fz48);
		font-weight: 400;
		margin-bottom: var(--px08);
		max-width: 25ch;

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

	p {
		color: var(--white-90);
		max-width: 55ch;
	}

	.pill {
		backdrop-filter: blur(var(--px02));
		background: var(--blue700-50);
		border: var(--px01) solid var(--blue500);
		border-radius: var(--radius-pill);
		color: var(--white-90);
		display: inline-block;
		font-size: var(--fz12);
		font-weight: 700;
		letter-spacing: var(--px04);
		margin-bottom: var(--px20);
		padding: var(--px08) var(--px16);
		text-transform: uppercase;
	}
}

.subhero-careers {
	--subhero-bg: url("https://ripcord.sirv.com/Cahaba/office-lobby.jpg");
}

.subhero-contact {
	--subhero-bg: url("https://ripcord.sirv.com/Cahaba/office-sign.jpg?cy=100");
}

.subhero-culture {
	--subhero-bg: url("https://ripcord.sirv.com/Cahaba/gallery/gallery-boating-retreat.jpg?cy=150");
}

.subhero-financial-planning {
	--subhero-bg: url("https://ripcord.sirv.com/Cahaba/subhero-financial-planning.jpg?cy=200");
}

.subhero-how-we-work {
	--subhero-bg: url("https://ripcord.sirv.com/Cahaba/office-table-03.jpg");
}

.subhero-investment-management {
	--subhero-bg: url("https://ripcord.sirv.com/Cahaba/subhero-investment-management.jpg?cy=350");
}

.subhero-locations-atlanta {
	--subhero-bg: url("https://ripcord.sirv.com/Cahaba/shutterstock_2680952297.jpg?cy=200");
}

.subhero-locations-birmingham {
	--subhero-bg: url("https://ripcord.sirv.com/Cahaba/shutterstock_1792719292.jpg?cy=200");
}

.subhero-locations-nashville {
	--subhero-bg: url("https://ripcord.sirv.com/Cahaba/shutterstock_1607557822.jpg");
}

.subhero-login {
	--subhero-bg: url("https://ripcord.sirv.com/Cahaba/office-table-empty-02.jpg");
}

.subhero-team {
	--subhero-bg: url("https://ripcord.sirv.com/Cahaba/office-table-empty-02.jpg?cy=100");
}

.subhero-what-we-do {
	--subhero-bg: url("https://ripcord.sirv.com/Cahaba/subhero-what-we-do.jpg?cy=600");
}

.subhero-who-we-serve {
	--subhero-bg: url("https://ripcord.sirv.com/Cahaba/gallery/gallery-team-meeting.jpg?cy=60");
}

/* #endregion */
/* #region Sub-Careers */
.office-pill {
	align-items: center;
	background: var(--blue050);
	border: var(--px01) solid var(--blue300);
	border-radius: var(--radius-pill);
	color: var(--blue700);
	display: flex;
	font-size: var(--fz14);
	font-weight: 500;
	gap: var(--px08);
	padding: var(--px08) var(--px20);

	i {
		color: var(--blue500);
	}
}

.office-pills {
	display: flex;
	flex-wrap: wrap;
	gap: var(--px12);
	margin-top: var(--px32);
}

.sub-careers--form {
	background: var(--blue050);
}

/* #endregion */
/* #region Sub-Careers-Confirm */
.sub-careers-confirm {
	--content-max-width: 55ch;
	padding-block: var(--px160);
	text-align: center;

	h1 {
		font-family: var(--font-serif);
		font-size: var(--fz48);
		font-weight: 400;
		margin-bottom: var(--px16);
	}

	p {
		color: var(--blue900-70);
		font-size: var(--fz18);
		margin-bottom: var(--px16);

		a {
			color: var(--blue500);
		}
	}

	.icon {
		color: var(--green500);
		font-size: var(--fz60);
		margin-bottom: var(--px24);
	}
}

/* #endregion */
/* #region Sub-Contact */
.office-block {
	border-left: var(--px02) solid var(--blue300);
	font-weight: 300;
	line-height: 1.7;
	margin-bottom: var(--px48);
	padding-left: var(--px20);

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

	a {
		text-decoration: none;
	}

	p {
		color: var(--blue900-70);
		font-size: var(--fz14);
		font-weight: 300;
		line-height: 1.7;
		margin-bottom: var(--px08);
	}

	.city {
		color: var(--blue500);
		font-size: var(--fz14);
		font-weight: 700;
		letter-spacing: var(--px01);
		margin-bottom: var(--px08);
		text-transform: uppercase;

		i {
			margin-right: var(--px04);
		}
	}

	.office-block-map {
		border-radius: var(--radius);
		margin-top: var(--px16);
		overflow: hidden;

		iframe {
			display: block;
		}
	}
}

.sub-contact-grid {
	display: grid;
	gap: var(--px48) 10vw;
	grid-template-columns: auto 1fr;

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

/* #endregion */
/* #region Sub-Contact-Confirm */
.sub-contact-confirm {
	--content-max-width: 55ch;
	padding-block: var(--px160);
	text-align: center;

	h1 {
		font-family: var(--font-serif);
		font-size: var(--fz48);
		font-weight: 400;
		margin-bottom: var(--px16);
	}

	p {
		color: var(--blue900-70);
		font-size: var(--fz18);
		margin-bottom: var(--px16);

		a {
			color: var(--blue500);
		}
	}

	.icon {
		color: var(--green500);
		font-size: var(--fz60);
		margin-bottom: var(--px24);
	}
}

/* #endregion */
/* #region Sub-Culture--Benefits */
.sub-culture--benefits {
	background: var(--blue050);

	.benefit-card {
		align-items: center;
		background: white;
		border-radius: var(--radius);
		box-shadow: 0 var(--px01) var(--px06) var(--blue700-10);
		display: flex;
		font-weight: 500;
		gap: var(--px12);
		padding: var(--px20) var(--px24);
		transition: var(--transition);

		&:hover {
			box-shadow: 0 var(--px04) var(--px20) var(--blue300-50);
			translate: 0 -2px;
		}

		i {
			color: var(--green500);
			flex-shrink: 0;
			font-size: var(--fz24);
		}
	}

	.benefits-grid {
		display: grid;
		gap: var(--px16);
		grid-template-columns: repeat(3, auto);
		justify-content: start;
		margin-top: var(--px32);

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

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

/* #endregion */
/* #region Sub-Culture--Gallery */
.fslightboxs {
	border-radius: var(--radius);
}

.mosaic-gallery {
	display: grid;
	gap: var(--px10);
	grid-auto-flow: dense;
	grid-auto-rows: 220px;
	grid-template-columns: repeat(4, 1fr);
	margin-top: var(--px32);

	@media (width < 900px) {
		grid-auto-rows: 180px;
		grid-template-columns: repeat(3, 1fr);

		a:nth-child(1),
		a:nth-child(7),
		a:nth-child(11),
		a:nth-child(14),
		a:nth-child(16),
		a:nth-child(20),
		a:nth-child(24),
		a:nth-child(27),
		a:nth-child(32) {
			grid-column: span 1;
			grid-row: span 1;
		}
	}

	@media (width < 600px) {
		grid-auto-rows: 150px;
		grid-template-columns: repeat(2, 1fr);
	}

	a {
		border-radius: var(--radius);
		overflow: hidden;
		position: relative;

		&::after {
			background: linear-gradient(to top, var(--blue900-90) 0%, transparent 65%);
			bottom: 0;
			color: var(--white-90);
			content: attr(data-caption);
			font-size: var(--fz12);
			font-weight: 400;
			left: 0;
			line-height: 1.4;
			opacity: 0;
			padding: var(--px40) var(--px16) var(--px16);
			position: absolute;
			right: 0;
			transition: var(--transition);
		}

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

		&:hover img {
			scale: 1.06;
		}

		&:nth-child(1) {
			grid-column: span 2;
			grid-row: span 2;
		}

		&:nth-child(7) {
			grid-column: span 2;
		}

		&:nth-child(11) {
			grid-column: span 2;
		}

		&:nth-child(14) {
			grid-row: span 2;
		}

		&:nth-child(16) {
			grid-column: span 2;
			grid-row: span 2;
		}

		&:nth-child(20) {
			grid-column: span 2;
		}

		&:nth-child(24) {
			grid-column: span 2;
		}

		&:nth-child(27) {
			grid-row: span 2;
		}

		&:nth-child(32) {
			grid-column: span 2;
		}
	}

	img {
		display: block;
		height: 100%;
		object-fit: cover;
		object-position: top;
		transition: var(--transition);
		width: 100%;
	}

	a[data-position="center"] img {
		object-position: center;
	}
}

/* #endregion */
/* #region Sub-Culture--Growth */
.sub-culture--growth {
	background: var(--blue900);

	h2 {
		color: var(--white-90);
	}

	p {
		color: var(--white-70);
		max-width: 75ch;
	}

	.eyebrow {
		color: var(--blue300);
	}

	.growth-areas {
		display: flex;
		flex-wrap: wrap;
		gap: var(--px12);
		margin-top: var(--px24);

		> div {
			background-color: var(--white-10);
			border: var(--px01) solid var(--white-30);
			border-radius: var(--radius-pill);
			color: var(--white-70);
			cursor: default;
			font-size: var(--fz14);
			font-weight: 500;
			letter-spacing: var(--px01);
			padding: var(--px08) var(--px20);
			transition: var(--transition);

			&:hover {
				background: var(--blue700);
				border-color: var(--white-50);
				color: var(--white-90);
			}
		}
	}
}

/* #endregion */
/* #region Sub-Culture--Mission */
.sub-culture--mission {
	background: var(--blue900);

	.grid {
		--bar-spacing: var(--px48);
		align-items: start;
		display: grid;
		gap: var(--px24) var(--bar-spacing);
		grid-template-columns: auto 1fr;

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

		blockquote {
			border-left: var(--px03) solid var(--blue300);
			color: var(--white-90);
			font-family: var(--font-serif);
			font-size: var(--fz18);
			font-weight: 300;
			letter-spacing: var(--px01);
			line-height: 1.6;
			max-width: 70ch;
			padding-left: var(--bar-spacing);
			text-wrap: balance;
		}

		h2 {
			color: var(--white-90);
			font-family: var(--font-serif);
			font-size: var(--fz32);
			font-weight: 400;
			margin-bottom: var(--px24);
		}

		.eyebrow {
			color: var(--blue300);
		}
	}
}

/* #endregion */
/* #region Sub-Culture--Values */
.value-block {
	background: white;
	border: var(--px01) solid var(--border-color);
	border-radius: var(--radius-lg);
	padding: var(--px28);
	transition: var(--transition);

	&:hover {
		box-shadow: 0 var(--px08) var(--px16) var(--box-shadow-color);
		translate: 0 -3px;
	}

	.icon {
		align-items: center;
		aspect-ratio: 1;
		border-radius: var(--radius);
		display: flex;
		flex-shrink: 0;
		justify-content: center;
		width: var(--px48);
	}

	.icon-row {
		align-items: center;
		display: flex;
		gap: var(--px12);
		margin-bottom: var(--px16);

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

		.icon {
			font-size: var(--fz14);
		}

		.text {
			display: flex;
			flex-direction: column;
			gap: var(--px02);

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

			p {
				color: var(--blue900-70);
				font-size: var(--fz14);
				line-height: 1.5;
				margin: 0;
			}
		}
	}

	&.theme-accountability {
		--border-color: var(--blue300);
		--box-shadow-color: var(--blue050);

		.icon {
			background: var(--blue050);
			color: var(--blue600);
		}
	}

	&.theme-relationships {
		--border-color: var(--purple300);
		--box-shadow-color: var(--purple100);

		.icon {
			background: var(--purple100);
			color: var(--purple700);
		}
	}
}

.value-block-grid {
	display: grid;
	gap: var(--px24);
	grid-template-columns: repeat(2, 1fr);
	margin-top: var(--px32);

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

.value-block-header {
	align-items: center;
	border-bottom: var(--px01) solid var(--blue900-30);
	display: flex;
	gap: var(--px16);
	margin-bottom: var(--px20);
	padding-bottom: var(--px20);

	.icon {
		font-size: var(--fz24);
		width: var(--px64);
	}

	.text {
		h3 {
			font-size: var(--fz20);
			margin-bottom: var(--px04);
		}

		p {
			color: var(--blue900-70);
			font-size: var(--fz14);
			margin: 0;
		}
	}
}

/* #endregion */
/* #region Sub-Financial-Planning */
.fp-card {
	background: white;
	border-radius: var(--radius-lg);
	box-shadow: 0 var(--px01) var(--px08) var(--blue700-10);
	padding: var(--px28);
	transition: var(--transition);

	&:hover {
		box-shadow: 0 var(--px08) var(--px24) var(--blue300-50);
		translate: 0 -3px;
	}

	h3 {
		font-family: var(--font-serif);
		font-size: var(--fz18);
		font-weight: 500;
		margin-bottom: var(--px08);
	}

	p {
		color: var(--blue900-70);
		font-size: var(--fz14);
		font-weight: 300;
		line-height: 1.6;
		margin: 0;
	}

	.fp-card-icon {
		align-items: center;
		background: var(--blue050);
		border-radius: var(--radius);
		color: var(--blue600);
		display: flex;
		font-size: var(--fz24);
		height: var(--px48);
		justify-content: center;
		margin-bottom: var(--px16);
		width: var(--px48);
	}
}

.fp-card-grid {
	display: grid;
	gap: var(--px20);
	grid-template-columns: repeat(3, 1fr);
	margin-top: var(--px32);

	@media (width < 900px) {
		grid-template-columns: repeat(2, 1fr);
	}

	@media (width < 600px) {
		grid-template-columns: 1fr;
	}
}

.related-link {
	color: var(--blue900-70);
	font-size: var(--fz14);
	margin-top: var(--px40);
	text-align: center;

	a {
		color: var(--blue500);
		font-weight: 600;
	}
}

.sub-financial-planning--services {
	background: var(--blue050);
}

/* #endregion */
/* #region Sub-How--Infographic */
.infographic-line {
	background: var(--blue200);
	height: 2px;
	left: 9%;
	position: absolute;
	right: 9%;
	top: 50%;
}

.infographic-line-fill {
	background: linear-gradient(to right, var(--blue300), var(--green500));
	height: 2px;
	left: 9%;
	position: absolute;
	top: 50%;
	transition: width 1.6s cubic-bezier(.4, 0, .2, 1);
	width: 0;

	&.filled {
		width: 82%;
	}
}

.infographic-scene {
	height: 500px;
	position: relative;
	width: 100%;

	.node {
		align-items: center;
		cursor: pointer;
		display: flex;
		flex-direction: column;
		opacity: 0;
		position: absolute;
		transition: var(--transition);
		translate: -50% var(--px10);
		width: 120px;

		&:hover .node-circle {
			scale: 1.1;
		}

		&.bottom {
			justify-content: flex-start;
			top: calc(50% + var(--px12));

			.node-circle {
				order: 3;
			}

			.node-label {
				margin-bottom: var(--px06);
				order: 2;
			}

			.node-sub {
				margin-bottom: var(--px03);
				order: 1;
			}
		}

		.node-circle {
			--node-bg: var(--blue050);
			--node-border-color: var(--blue400);
			--node-color: var(--blue700);
			align-items: center;
			aspect-ratio: 1;
			background: var(--node-bg);
			border: var(--px03) solid var(--node-border-color);
			border-radius: 50%;
			color: var(--node-color);
			display: flex;
			flex-shrink: 0;
			font-size: var(--fz32);
			justify-content: center;
			transition: var(--transition);
			width: 100px;

			&.purple {
				--node-bg: var(--purple100);
				--node-border-color: var(--purple700);
				--node-color: var(--purple900);
			}

			&.teal {
				--node-bg: var(--green100);
				--node-border-color: var(--green500);
				--node-color: var(--green900);
			}
		}

		.node-label {
			--label-color: var(--blue700);
			color: var(--label-color);
			font-size: var(--fz18);
			font-weight: 700;
			line-height: 1.3;
			max-width: 120px;
			text-align: center;

			&.purple {
				--label-color: var(--purple900);
			}

			&.teal {
				--label-color: var(--green900);
			}
		}

		.node-sub {
			color: var(--blue500);
			font-size: var(--fz14);
			line-height: 1.3;
			max-width: 115px;
			text-align: center;
		}

		&.top {
			bottom: calc(50% + var(--px12));
			justify-content: flex-end;

			.node-circle {
				margin-bottom: var(--px06);
				order: 1;
			}

			.node-label {
				margin-bottom: var(--px03);
				order: 2;
			}

			.node-sub {
				order: 3;
			}
		}

		&.visible {
			opacity: 1;
			translate: -50% 0;
		}
	}

	.tl-dot {
		--dot-color: var(--blue400);
		background: white;
		border: var(--px02) solid var(--dot-color);
		border-radius: 50%;
		height: 10px;
		opacity: 0;
		position: absolute;
		top: 50%;
		transition: opacity var(--transition);
		translate: -50% -50%;
		width: 10px;

		&.purple {
			--dot-color: var(--purple700);
		}

		&.teal {
			--dot-color: var(--green500);
		}

		&.visible {
			opacity: 1;
		}
	}
}

.infographic-tooltip {
	background: white;
	border: var(--px01) solid white;
	border-radius: var(--radius);
	box-shadow: 0 var(--px04) var(--px16) var(--blue950-10);
	color: var(--blue900);
	font-size: var(--fz12);
	line-height: 1.4;
	max-width: 190px;
	opacity: 0;
	padding: var(--px10) var(--px12);
	pointer-events: none;
	position: fixed;
	transition: var(--transition);
	z-index: 100;

	span {
		color: var(--blue500);
	}

	strong {
		display: block;
		font-size: var(--fz14);
		font-weight: 600;
		margin-bottom: var(--px03);
	}

	&.show {
		opacity: 1;
	}
}

/* #endregion */
/* #region Sub-How--Process */
.sub-how--process {
	background: var(--blue050);
}

.process-step-grid {
	display: grid;
	gap: var(--px24);
	grid-template-columns: 1fr 1fr;
	margin-top: var(--px40);

	@media (width < 680px) {
		grid-template-columns: 1fr;
	}

	.process-step {
		background: white;
		border-radius: var(--radius-lg);
		box-shadow: 0 var(--px01) var(--px08) var(--blue700-10);
		padding: var(--px32);
		transition: var(--transition);

		a {
			color: var(--blue500);
		}

		h3 {
			font-family: var(--font-serif);
			font-size: var(--fz20);
			font-weight: 500;
			margin-bottom: var(--px08);
		}

		p {
			color: var(--blue900-70);
			font-size: var(--fz16);
			font-weight: 300;
			margin: 0;
		}

		.process-step-number {
			color: var(--blue300);
			font-family: var(--font-serif);
			font-size: var(--fz36);
			font-style: italic;
			font-weight: 400;
			line-height: 1;
			margin-bottom: var(--px12);
		}
	}
}

/* #endregion */
/* #region Sub-Investment-Management */
.sub-investment-management--philosophy {
	background: var(--blue050);
}

.tenet-card {
	background: white;
	border-radius: var(--radius-lg);
	box-shadow: 0 var(--px01) var(--px08) var(--blue700-10);
	padding: var(--px32);
	transition: var(--transition);

	&:hover {
		box-shadow: 0 var(--px08) var(--px24) var(--blue300-50);
		translate: 0 -3px;
	}

	h3 {
		font-family: var(--font-serif);
		font-size: var(--fz20);
		font-weight: 400;
		margin-bottom: var(--px12);
	}

	p {
		color: var(--blue900-70);
		font-size: var(--fz16);
		font-weight: 300;
		margin: 0;
	}

	.tenet-label {
		color: var(--blue500);
		font-size: var(--fz12);
		font-weight: 700;
		letter-spacing: var(--px04);
		margin-bottom: var(--px12);
		text-transform: uppercase;
	}

	.tenet-number {
		color: var(--blue300);
		font-family: var(--font-serif);
		font-size: var(--fz36);
		font-style: italic;
		font-weight: 400;
		line-height: 1;
		margin-bottom: var(--px04);
	}
}

.tenet-grid {
	display: grid;
	gap: var(--px24);
	grid-template-columns: repeat(2, 1fr);
	margin-top: var(--px32);

	@media (width < 680px) {
		grid-template-columns: 1fr;
	}
}

/* #endregion */
/* #region Sub-Locations */
.sub--alt {
	background: var(--blue050);
}

.sub-locations-areas-list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--px10);
	list-style: none;
	margin-block: var(--px24);
	max-width: 60%;

	li {
		background: var(--blue050);
		border: var(--px01) solid var(--blue300);
		border-radius: var(--radius-pill);
		color: var(--blue700);
		font-size: var(--fz14);
		font-weight: 500;
		padding: var(--px06) var(--px16);
	}
}

.sub-locations-directions {
	display: grid;
	gap: var(--px32);
	grid-template-columns: repeat(3, 1fr);
	margin-top: var(--px32);

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

	h3 {
		font-size: var(--fz16);
		font-weight: 600;
		margin-bottom: var(--px08);
	}

	p {
		color: var(--blue900-70);
		font-size: var(--fz16);
		margin: 0;
	}
}

.sub-locations-faq {
	margin-top: var(--px32);

	.faq-item {
		border-top: var(--px01) solid var(--blue900-30);
		padding-block: var(--px24);

		&:last-child {
			border-bottom: var(--px01) solid var(--blue900-30);
		}

		h3 {
			font-size: var(--fz18);
			font-weight: 600;
			margin-bottom: var(--px10);
		}

		p {
			color: var(--blue900-70);
			margin: 0;
			max-width: 70ch;
		}
	}
}

.sub-locations-intro-grid {
	align-items: start;
	display: grid;
	gap: var(--px48) var(--px64);
	grid-template-columns: 1fr 280px;

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

.sub-locations-office-card {
	background: var(--blue050);
	border: var(--px01) solid var(--blue300);
	border-radius: var(--radius-lg);
	padding: var(--px32);

	address {
		color: var(--blue900-70);
		font-size: var(--fz14);
		font-style: normal;
		line-height: 1.7;
		margin-bottom: var(--px16);
	}

	a {
		color: var(--blue500);
		display: block;
		font-size: var(--fz14);
		font-weight: 600;
		text-decoration: none;

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

	.sub-locations-office-city {
		color: var(--blue500);
		font-size: var(--fz12);
		font-weight: 700;
		letter-spacing: var(--px02);
		margin-bottom: var(--px16);
		text-transform: uppercase;
	}
}

.sub-locations-services-list {
	columns: 2;
	gap: var(--px16) var(--px48);
	list-style: none;
	margin-top: var(--px24);

	@media (width < 600px) {
		columns: 1;
	}

	li {
		break-inside: avoid;
		color: var(--blue900-70);
		font-size: var(--fz16);
		margin-bottom: var(--px12);
		padding-left: var(--px24);
		position: relative;

		&::before {
			color: var(--blue500);
			content: "—";
			left: 0;
			position: absolute;
		}
	}
}

/* #endregion */
/* #region Sub-Login */
.sub-login-card {
	align-items: center;
	background: white;
	border: var(--px01) solid var(--blue900-30);
	border-radius: var(--radius-lg);
	display: flex;
	flex-direction: column;
	gap: var(--px20);
	justify-content: center;
	min-height: 200px;
	padding: var(--px48);
	text-decoration: none;
	transition: var(--transition);

	&:hover {
		box-shadow: 0 var(--px08) var(--px24) var(--blue300-50);
		translate: 0 -3px;

		span i {
			translate: var(--px04) 0;
		}
	}

	img {
		max-height: 50px;
		object-fit: contain;
		width: auto;
	}

	span {
		color: var(--blue500);
		font-size: var(--fz14);
		font-weight: 600;
		letter-spacing: var(--px01);

		i {
			font-size: var(--fz12);
			margin-left: var(--px04);
			transition: var(--transition);
		}
	}
}

.sub-login-grid {
	display: grid;
	gap: var(--px24);
	grid-template-columns: repeat(2, 1fr);
	margin-top: var(--px32);

	@media (width < 600px) {
		grid-template-columns: 1fr;
	}
}

/* #endregion */
/* #region Sub-Team */
.back-link {
	align-items: center;
	color: var(--blue500);
	display: inline-flex;
	font-size: var(--fz14);
	font-weight: 600;
	gap: var(--px08);
	margin-bottom: var(--px40);
	text-decoration: none;
	transition: var(--transition);

	&:hover {
		color: var(--blue700);
		gap: var(--px12);
	}

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

.bio-header {
	padding-block: var(--px160) var(--px80);

	.bio-header-grid {
		display: grid;
		gap: var(--px48) var(--px64);
		grid-template-columns: 320px 1fr;

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

	.bio-intro {
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	.bio-name {
		font-family: var(--font-serif);
		font-size: var(--fz48);
		font-weight: 400;
		line-height: 1.2;
		margin-bottom: var(--px08);

		.bio-credentials {
			color: var(--blue500);
			font-size: var(--fz28);

			sup {
				translate: 1px -2px;
			}
		}
	}

	.bio-office {
		align-items: center;
		color: var(--blue500);
		display: inline-flex;
		font-size: var(--fz14);
		font-weight: 600;
		gap: var(--px08);
		letter-spacing: var(--px01);
		margin-bottom: 0;

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

	.bio-photo {
		border-radius: var(--radius-lg);
		overflow: hidden;

		img {
			aspect-ratio: 3/4;
			display: block;
			object-fit: cover;
			object-position: top;
			width: 100%;
		}
	}

	.bio-title {
		color: var(--blue900-70);
		font-size: var(--fz20);
		font-weight: 300;
		margin-bottom: var(--px24);
	}
}

.sub-bio--body {
	background: var(--blue050);

	p {
		max-width: 72ch;
	}
}

.sub-team--members {
	/* this pushes the team grid down because there's no subhero on the Team page */
	padding-top: var(--px160);
}

.sub-team--search {
	background: var(--blue050);
}

.team-card {
	color: var(--blue900);
	display: block;
	text-decoration: none;
	transition: var(--transition);

	&:hover {
		translate: 0 -3px;

		.team-card-name {
			color: var(--blue500);
		}

		.team-card-photo {
			&::after {
				opacity: 0;
			}

			img {
				filter: grayscale(0);
				scale: 1.04;
			}
		}
	}

	.team-card-credentials {
		color: var(--blue500);
		font-size: var(--fz14);
		font-weight: 600;

		sup {
			translate: 1px -2px;
		}
	}

	.team-card-name {
		font-size: var(--fz18);
		font-weight: 600;
		line-height: 1.3;
		margin-bottom: var(--px04);
		transition: var(--transition);
	}

	.team-card-photo {
		aspect-ratio: 3/4;
		border-radius: var(--radius-lg);
		margin-bottom: var(--px16);
		max-width: 300px;
		overflow: hidden;
		position: relative;

		&::after {
			background: var(--blue300-10);
			border-radius: var(--radius-lg);
			content: "";
			inset: 0;
			position: absolute;
			transition: var(--transition);
		}

		img {
			filter: grayscale(1);
			height: 100%;
			object-fit: cover;
			object-position: top;
			transition: var(--transition);
			width: 100%;
		}
	}

	.team-card-title {
		color: var(--blue900-70);
		font-size: var(--fz14);
		font-weight: 400;
		line-height: 1.4;
	}
}

.team-card-grid {
	display: grid;
	gap: var(--px32) var(--px24);
	grid-template-columns: repeat(4, 1fr);
	margin-top: var(--px40);

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

	@media (width < 800px) {
		grid-template-columns: repeat(2, 1fr);
	}

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

.team-search-empty {
	color: var(--blue900-50);
	font-size: var(--fz16);
	margin-top: var(--px32);
	text-align: center;
}

.team-search-flex {
	align-items: center;
	background: white;
	border: var(--px01) solid var(--blue900-30);
	border-radius: var(--radius);
	display: flex;
	gap: var(--px12);
	margin-top: var(--px24);
	padding: var(--px12) var(--px20);
	transition: var(--transition);

	&:focus-within {
		border-color: var(--blue500);
		box-shadow: 0 0 0 var(--px03) var(--blue300-50);
	}

	.team-search-icon {
		color: var(--blue500);
		flex-shrink: 0;
		font-size: var(--fz16);
	}
}

.team-search-input {
	appearance: none;
	background: none;
	border: none;
	color: var(--blue900);
	flex: 1;
	font-family: var(--font-sans);
	font-size: var(--fz18);
	outline: none;
	width: 100%;

	&::placeholder {
		color: var(--blue900-30);
	}
}

/* #endregion */
/* #region Sub-What-We-Do */
.service-card {
	background: white;
	border: var(--px01) solid var(--blue900-30);
	border-radius: var(--radius-lg);
	display: block;
	padding: var(--px32);
	text-decoration: none;
	transition: var(--transition);

	&:hover {
		box-shadow: 0 var(--px08) var(--px24) var(--blue700-10);
		translate: 0 -3px;

		.service-card-link i {
			translate: var(--px04) 0;
		}
	}

	h3 {
		font-family: var(--font-sans);
		font-size: var(--fz24);
		font-weight: 500;
		margin-bottom: var(--px12);
	}

	p {
		color: var(--blue900-70);
		font-size: var(--fz16);
		font-weight: 300;
		margin-bottom: var(--px20);
	}

	.service-card-icon {
		align-items: center;
		background: var(--blue050);
		border-radius: var(--radius);
		color: var(--blue600);
		display: flex;
		font-size: var(--fz28);
		height: var(--px64);
		justify-content: center;
		margin-bottom: var(--px20);
		width: var(--px64);
	}

	.service-card-link {
		color: var(--blue500);
		font-size: var(--fz14);
		font-weight: 600;

		i {
			font-size: var(--fz12);
			margin-left: var(--px04);
			transition: var(--transition);
		}
	}
}

.service-card-grid {
	display: grid;
	gap: var(--px24);
	grid-template-columns: repeat(2, 1fr);
	margin-top: var(--px40);

	@media (width < 680px) {
		grid-template-columns: 1fr;
	}
}

.sub-what-we-do--services {
	background: var(--blue050);
}

/* #endregion */
/* #region Sub-Who-We-Serve */
.segment-card {
	background: white;
	border: var(--px01) solid var(--blue900-30);
	border-radius: var(--radius-lg);
	padding: var(--px28);
	transition: var(--transition);

	&:hover {
		box-shadow: 0 var(--px08) var(--px24) var(--blue700-10);
		translate: 0 -3px;
	}

	> p {
		color: var(--blue900-70);
		font-size: var(--fz16);
		font-weight: 300;
		margin-bottom: var(--px16);
	}

	.segment-card-header {
		align-items: center;
		border-bottom: var(--px01) solid var(--blue900-30);
		display: flex;
		gap: var(--px16);
		margin-bottom: var(--px20);
		padding-bottom: var(--px20);

		h3 {
			font-size: var(--fz20);
			font-weight: 600;
			margin-bottom: var(--px04);
		}

		p {
			color: var(--blue900-70);
			font-size: var(--fz14);
			margin: 0;
		}

		.segment-icon {
			align-items: center;
			background: var(--blue050);
			border-radius: var(--radius);
			color: var(--blue600);
			display: flex;
			flex-shrink: 0;
			font-size: var(--fz24);
			height: var(--px48);
			justify-content: center;
			width: var(--px48);
		}
	}
}

.segment-grid {
	display: grid;
	gap: var(--px24);
	grid-template-columns: repeat(2, 1fr);
	margin-top: var(--px32);

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

.segment-list {
	list-style: none;
	padding: 0;

	li {
		border-bottom: var(--px01) solid var(--blue900-30);
		color: var(--blue900);
		font-size: var(--fz14);
		font-weight: 400;
		line-height: 1.5;
		padding-block: var(--px08);
		padding-left: var(--px20);
		position: relative;

		&:last-child {
			border-bottom: none;
		}

		&::before {
			color: var(--green500);
			content: "→";
			left: 0;
			position: absolute;
		}
	}
}

.sub-who-we-serve--intro {
	background: var(--blue900);

	blockquote {
		border-left: var(--px03) solid var(--blue300);
		color: var(--white-90);
		font-family: var(--font-serif);
		font-size: var(--fz18);
		font-weight: 300;
		letter-spacing: var(--px01);
		line-height: 1.6;
		max-width: 70ch;
		padding-left: var(--px48);
		text-wrap: balance;
	}

	h2 {
		color: var(--white-90);
	}

	.eyebrow {
		color: var(--blue300);
	}
}

/* #endregion */