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

	to {
		opacity: 1;
		translate: var(--animate-translateX, 0);
	}
}

@keyframes heroLogo {
	0% {
		opacity: 0;
		width: min(600px, 90%);
	}

	50% {
		opacity: 1;
		width: min(600px, 90%);
	}

	90% {
		opacity: 0;
	}

	100% {
		width: 0;
	}
}

/* #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(--blue500) 80%, transparent) !important;
	}
}

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

a {
	color: var(--blue500);
	text-decoration: none;
	text-underline-offset: 4px;
	transition: var(--transition);

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

body {
	color: var(--blue900);
	font-family: var(--font-sans);
	font-size: var(--fz18);
	line-height: 1.2;
}

button {
	background: none;
	border: none;
	cursor: pointer;
	transition: var(--transition);
}

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

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

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

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

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

li {
	font-size: var(--fz18);
	margin: 1rem 0 0 1rem;
}

p {
	line-height: 1.7;
	margin-bottom: 1.2em;
	text-wrap: pretty;
}

sup {
	font-size: .7em;
	margin-inline: 2px;
}

/* #endregion */
/* #region Global */
.accolades-grid {
	display: grid;
	gap: 3rem 3vw;
	grid-template-columns: repeat(6, 1fr);
	margin-block: 4rem;

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

	div {
		@media (width < 1000px) {
			grid-column: 1/-1 !important;
		}

		&:nth-child(1) {
			grid-column: 1/3;
		}

		&:nth-child(2) {
			grid-column: 3/5;
		}

		&:nth-child(3) {
			grid-column: 5/-1;
		}

		&:nth-child(4) {
			grid-column: 1/4;
			justify-self: center;
		}

		&:nth-child(5) {
			grid-column: 4/7;
			justify-self: center;
		}
	}

	h3 {
		font-size: var(--fz16) !important;
		font-weight: 700 !important;
		letter-spacing: normal !important;
		margin: 0 auto 1em;
		max-width: 300px;
		text-align: center;
		text-transform: none !important;
	}

	img {
		border: 2px solid var(--blue300);

		@media (width < 1000px) {
			width: 400px;
		}
	}

	li {
		font-size: 12px;
		line-height: 1.3;
		list-style-type: none;
		margin-top: .5em;
		text-align: left;
	}

	ul {
		line-height: 1;
		margin-top: 1rem;
	}
}

.brokercheck-banner {
	background-color: var(--blue900-90);
	bottom: 0;
	left: 0;
	padding: 1rem;
	position: fixed;
	width: 100%;
	z-index: 50;

	p {
		margin: 0;
	}

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

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

.btn {
	background-color: var(--blue700);
	border: 1px solid currentColor;
	color: var(--blue100);
	font-size: var(--fz14);
	font-weight: 700;
	letter-spacing: 1px;
	padding: 1rem 2rem;
	text-transform: uppercase;

	&:hover {
		background-color: var(--blue900);
		border-color: currentColor;
		color: var(--blue300);
		text-decoration: none;
		translate: 0 1rem;
	}
}

.callout {
	font-size: var(--fz24);
	margin-bottom: 3rem;
	max-width: 65ch;
}

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

	&.article {
		max-width: 70ch;

		h2 {
			margin-bottom: 1rem;
		}

		h3 {
			font-size: var(--fz20);
			letter-spacing: normal;
			margin-bottom: .3em;
			text-transform: none;
		}

		img {
			margin-bottom: 2rem;
		}

		.inset {
			margin: 2rem auto;
			max-width: 95%;
		}

		.pip {
			margin-top: 2rem;
		}
	}
}

.cta {
	background: linear-gradient(to bottom, var(--blue900-70), var(--blue900-70)), url("https://ripcord.sirv.com/Clarity/clarity-naples-pittsburgh.jpg") center/cover;
	color: white;
	padding-block: 10vh;
	text-align: center;

	h2 {
		color: white;
		font-size: var(--fz36);
		margin-bottom: .5rem;
	}

	p {
		font-size: var(--fz20);
		margin-bottom: 3rem;
	}
}

.disclosure {
	a {
		text-decoration: underline;
	}

	p {
		color: var(--steel700);
		font-size: var(--fz14) !important;
		text-align: left;
	}
}

.firstline {
	color: var(--steel700);
	font-size: var(--fz20);
	font-weight: 600;
	max-width: 50ch;
	text-wrap: balance;
}

.new {
	position: relative;

	&::after {
		background-color: mediumseagreen;
		border-radius: var(--radius);
		color: white;
		content: "Welcome!";
		font-size: var(--fz12);
		font-weight: 600;
		line-height: 1;
		margin-left: .5rem;
		padding: .5rem;
		position: absolute;
		text-align: center;
		text-box-trim: both;
		text-transform: uppercase;
		top: -.3rem;

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

.pip {
	background-color: var(--steel300);
	height: 5px;
	margin-bottom: 3rem;
	width: min(30%, 5rem);
}

.shortline {
	max-width: 60ch;
}

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

	&:focus {
		top: 1rem;
	}
}

.video {
	border: 1px solid var(--steel300);
	cursor: pointer;
	width: min(100%, 600px);
}

/* #endregion */
/* #region Nav */
.nav-contain {
	--main-link-bg-color: var(--blue300);
	justify-self: end;
}

.nav-drop {
	position: relative;

	&:focus-within .nav-drop-menu,
	&:hover .nav-drop-menu {
		opacity: 1;
		visibility: visible;
	}

	&:has(.nav-drop-menu:hover) .nav-main-link {
		border-color: var(--main-link-bg-color);
	}

	.nav-main-link::after {
		content: "\f0d7";
		font-family: "Font Awesome 7 Pro";
		font-size: var(--fz12);
		margin-left: 5px;
	}
}

.nav-drop-menu {
	/* border-top adds spacing between the main menu link and the dropdown box below */
	border-top: .5rem solid transparent;
	box-shadow: 0 4px 8px 0 var(--blue900-10);
	opacity: 0;
	position: absolute;
	transition: var(--transition);
	visibility: hidden;

	@media (width < 1300px) {
		opacity: 1;
		position: relative;
		visibility: visible;
	}

	a {
		background-color: white;
		color: var(--blue500) !important;
		display: block;
		text-decoration: none;
		white-space: nowrap;

		@media (width < 1300px) {
			background-color: transparent;
			color: white !important;
			margin-left: 1rem;
		}

		&:hover {
			background-color: var(--blue100);

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

.nav-grid {
	display: grid;
	gap: .3vw;
	grid-auto-flow: column;

	@media (width < 1300px) {
		--mobile-menu-width: 50vw;
		align-content: start;
		backdrop-filter: blur(4px);
		background-color: var(--blue900-90);
		grid-auto-flow: row;
		height: 100vh;
		justify-content: center;
		padding-top: 2rem;
		position: absolute;
		right: 0;
		top: 0;
		translate: var(--mobile-menu-width);
		transition: var(--transition);
		visibility: hidden;
		width: var(--mobile-menu-width);
	}

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

	a {
		color: white;
		display: block;
		font-size: var(--fz14);
		font-weight: 500;
		padding: .7rem !important;
		text-decoration: none;
		text-transform: uppercase;

		@media (width < 1300px) {
			border-color: transparent !important;
			color: white;
			font-size: var(--fz16);
			padding: .4rem 0 !important;
		}
	}
}

.nav-main-link {
	border-top: 3px solid transparent;
	font-weight: 600 !important;
	letter-spacing: .5px;

	&[href*="wellsfargo"]::after {
		content: "\f08e";
		display: inline-block;
		font-family: "Font Awesome 7 Pro";
		font-size: var(--fz12);
		translate: 5px -2px;
	}

	/* for tabbing - a11y */
	&:focus + .nav-drop-menu {
		opacity: 1;
		visibility: visible;
	}

	&:hover {
		border-color: var(--main-link-bg-color);
	}
}

.nav-open {
	@media (width < 1300px) {
		.fa-xmark-large {
			color: white;
			display: block !important;
			position: relative;
			rotate: 270deg;
			transition: .8s;
			z-index: 10;
		}

		.nav-drop-menu {
			border-top: none;
		}

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

			a {
				padding-block: .2rem;
			}
		}
	}
}

.nav-toggle {
	display: none;

	@media (width < 1300px) {
		color: white;
		display: block;
		font-size: var(--fz24);
		padding: .5rem;
		text-decoration: none;
	}
}

/* #endregion */
/* #region Header */
.header {
	padding-block: 1.5rem;
	position: fixed;
	transition: var(--transition);
	width: 100%;
	z-index: 10;

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

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

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

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

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

/* #endregion */
/* #region Footer */
.footer {
	background-color: var(--blue900);
	color: var(--blue100);
	font-size: var(--fz14);
	padding-block: 4rem 6rem;

	a {
		color: var(--blue200);
		font-size: var(--fz14);
		text-decoration: underline;
		word-break: break-all;

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

	p {
		color: var(--blue300);
		font-size: var(--fz14) !important;
	}

	.links {
		display: grid;
		gap: .5rem 1rem;
		grid-auto-flow: column;
		justify-content: start;
		margin-bottom: 1rem;

		@media (width < 900px) {
			grid-auto-flow: row;
		}
	}
}

.footer-locations-flex {
	--footer-locations-gap: 3vw;
	display: flex;
	flex-wrap: wrap;
	gap: 2rem var(--footer-locations-gap);
	justify-content: center;
	margin-bottom: 4rem;

	& > div {
		flex: 0 0 auto;
		text-align: center;
		/* 5 columns */
		width: calc((100% - var(--footer-locations-gap) * 4) / 5);

		@media (width < 1200px) {
			/* 3-2 split */
			width: calc((100% - var(--footer-locations-gap) * 2) / 3);
		}

		@media (width < 700px) {
			/* 2-2-1 split */
			width: calc((100% - var(--footer-locations-gap)) / 2);
		}

		@media (width < 500px) {
			/* 1 column */
			width: 100%;
		}
	}

	h2 {
		color: white;
		font-size: var(--fz14);
		font-weight: 600;
		letter-spacing: 1px;
		margin-bottom: .5rem;
		text-transform: uppercase;
	}

	p {
		color: var(--steel300);
		margin-bottom: 0;
	}
}

/* #endregion */
/* #region Hero */
.hero {
	background: linear-gradient(to bottom, var(--blue500), transparent);
	color: white;
	padding-block: 25vh 10vh;
	text-align: center;

	h1 {
		font-size: var(--fz60);
		font-weight: 600;
		line-height: 1.1;
		margin-bottom: 3rem;
		translate: 0 2rem;
	}

	p {
		animation: fadeIn 2s ease 4s both;
		font-size: var(--fz24);
		margin: 0 auto 2rem;
		max-width: 63ch;
		translate: 0 2rem;

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

	span {
		animation: fadeIn 2s ease 2s both;

		&:last-of-type {
			animation-delay: 3s;
		}
	}

	.hero-logo {
		animation: heroLogo 4s ease both;
		margin-inline: auto;
		max-width: max-content;
	}
}

.hero-video-bg {
	height: auto;
	left: 50%;
	min-height: 100%;
	min-width: 100%;
	position: fixed;
	top: 0;
	translate: -50%;
	width: auto;
	z-index: -10;
}

/* #endregion */
/* #region Home-Accolades */
.home-accolades {
	background: radial-gradient(var(--blue500), var(--blue900));
	color: white;
	padding-block: 6rem;
	text-align: center;

	h2 {
		font-size: var(--fz36);

		+ p {
			font-size: var(--fz24);
		}
	}

	li {
		color: var(--blue300);
	}

	.disclosure {
		a {
			color: var(--blue200);
		}

		p {
			color: var(--blue300);
		}
	}
}

/* #endregion */
/* #region Home-FWA */
.home-fwa {
	background: linear-gradient(to right, white 40%, transparent), url("https://ripcord.sirv.com/Clarity/shutterstock_164560622.jpg") center 35%/cover, white;
	padding-block: 4rem;

	@media (width < 1200px) {
		background: white;
	}

	img {
		margin-bottom: 1rem;
	}

	p {
		max-width: 55%;

		@media (width < 1200px) {
			max-width: 100%;
		}

		&:last-of-type {
			font-size: var(--fz20);
			font-weight: 700;
		}
	}
}

/* #endregion */
/* #region Home-Services */
.home-services-grid {
	display: grid;
	gap: 2rem 1rem;
	grid-template-columns: repeat(3, 1fr);
	margin-bottom: 4rem;

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

	a {
		color: white;
		margin-inline: auto;
		max-width: 500px;
		text-decoration: none;

		&:hover {
			h2 {
				background-color: var(--blue700-90);
				transition: var(--transition);
			}

			img {
				opacity: 1;
				scale: 1.08;
				transition: var(--transition);
			}
		}
	}

	div:has(img) {
		overflow: hidden;

		@media (width < 1300px) {
			margin-bottom: 1rem;
		}
	}

	h2 {
		align-content: center;
		background-color: var(--blue700-50);
		font-size: var(--fz14);
		font-weight: 600;
		letter-spacing: 1px;
		padding: 1rem;
		text-align: center;
		text-transform: uppercase;

		span {
			display: block;
			font-size: var(--fz12);
			letter-spacing: 0;
			text-transform: none;
		}
	}

	img {
		aspect-ratio: 1;
		object-fit: cover;
		opacity: .8;
		transition: var(--transition);
		width: 100%;
	}

	.video {
		margin-inline: auto;
		grid-column: 1/-1;
	}
}

/* #endregion */
/* #region Sub */
.sub {
	background: url("https://ripcord.sirv.com/Clarity/logomark.png?opacity=6") 80% -140px no-repeat white;
	padding-block: 5rem 8rem;

	h2 {
		color: var(--blue700);
		font-size: var(--fz32);
		font-weight: 700;
		letter-spacing: 1px;
		margin-bottom: 3rem;
		text-transform: uppercase;
	}

	h3 {
		color: var(--blue700);
		font-size: var(--fz24);
		font-weight: 600;
		letter-spacing: 1px;
		margin-bottom: 1rem;
		text-transform: uppercase;
	}

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

.subhero {
	background: linear-gradient(var(--blue500), var(--blue700-50)), url("https://ripcord.sirv.com/Clarity/shutterstock_1916007808.jpg");
	padding-block: 15vh 6vh;

	h1 {
		--animate-translateX: 0;
		animation: fadeIn 1s .3s ease both;
		color: white;
		font-size: var(--fz40);
		font-weight: 600;
		line-height: 1.2;
		margin-bottom: 0;
		max-width: 35ch;
		text-wrap: balance;
		translate: 3rem;

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

/* #endregion */
/* #region Sub-Bio */
.sub-bio-body p {
	font-size: var(--fz16);
	max-width: 90ch;
}

.sub-bio-head {
	color: white;
	font-size: var(--fz16);

	a {
		color: var(--blue300);
		display: block;
	}

	> div {
		padding: 1.5rem 2rem;
	}

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

	.name {
		color: white;
		font-size: var(--fz20);
		font-weight: 600;
		margin-block: 0 .4rem;
		text-transform: none;
	}
}

.sub-bio-page {
	.back {
		background-color: var(--blue100);
		color: var(--blue700);
		display: block;
		font-size: var(--fz14);
		font-weight: 700;
		letter-spacing: 1px;
		margin-bottom: 2rem;
		padding: 1rem 1rem .8rem;
		text-transform: uppercase;
		width: max-content;

		&:hover {
			background-color: var(--blue500);
			color: white;
			text-decoration: none;
		}

		&:last-of-type {
			margin-top: 3rem;
		}
	}

	.sub-bio-head {
		align-items: end;
		color: var(--blue700);
		display: grid;
		gap: 2vw;
		grid-template-columns: auto auto;
		justify-content: start;
		margin-bottom: 3rem;

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

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

		> div {
			padding: 0;
		}

		img {
			background-color: var(--blue700);
			cursor: initial;
			width: 350px;
		}

		.name {
			color: var(--blue700);
			font-size: var(--fz24);
			font-weight: 700;
			letter-spacing: 0;
			margin-bottom: .3rem;
			text-transform: none;
		}

		.role {
			font-size: var(--fz18);
			font-weight: 600;
			margin-bottom: .5rem;
		}
	}
}

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

	h3 {
		font-size: var(--fz20);
		margin-bottom: .5rem;
	}

	iframe {
		aspect-ratio: 1.2;
		width: min(var(--col-min-width), 100%);
	}

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

/* #endregion */
/* #region Sub-Expertise */
.sub-expertise-credentials-grid {
	--col-min-width: 250px;
	display: grid;
	gap: 2rem;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--col-min-width)), auto));

	> div:first-of-type {
		grid-row: 1/-1;
	}

	h3 {
		font-size: var(--fz18);
		font-weight: 700;
		letter-spacing: 0;
		margin-top: 0;
		text-transform: none;
	}

	li {
		font-size: var(--fz14);
		list-style-type: none;
		margin: .5rem 0 0 0;
	}

	ul {
		margin-left: 0;
	}
}

.sub-expertise-grid {
	--col-min-width: 300px;
	display: grid;
	gap: 2rem 5vw;
	grid-template-columns: repeat(3, 1fr);
	margin-block: 3rem;

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

	h3 {
		font-size: var(--fz16);
		font-weight: 700;
		margin: 1rem 0;
		text-align: center;
		text-transform: none;
	}

	img {
		border: 1px solid var(--steel100);
		margin: 0 auto .5rem;
		width: 300px;

		&:first-of-type {
			grid-column: 1;
			grid-row: 1;
		}
	}

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

	sup {
		font-weight: 400;
	}
}

.sub-expertise-numbers-circle {
	align-items: center;
	aspect-ratio: 1;
	border-radius: 50%;
	color: white;
	display: flex;
	font-size: 60px;
	font-weight: 700;
	justify-content: center;
	width: 3em;
}

.sub-expertise-numbers-grid {
	display: grid;
	gap: 2rem;
	grid-template-columns: repeat(6, auto);
	justify-content: center;
	margin: 0 auto 4rem;
	max-width: 80%;

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

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

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

	> div {
		align-items: center;
		display: flex;
		flex-direction: column;
	}

	p {
		color: var(--blue500);
		font-size: var(--fz16);
		font-weight: 700;
		line-height: 1.3;
		margin-top: 10px;
		text-align: center;
		text-wrap: balance;
	}
}

/* #endregion */
/* #region Sub-Four-Point */
.sub-four-point-grid {
	display: grid;
	gap: 3rem;
	grid-template-columns: 1fr auto 1fr;
	grid-template-rows: auto auto;

	@media (width < 1300px) {
		grid-template-columns: 1fr 1fr;
		row-gap: 1rem;
	}

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

	> div:nth-of-type(1) {
		text-align: right;

		@media (width < 900px) {
			grid-row: 2;
			text-align: left;
		}
	}

	> div:nth-of-type(2) {
		grid-column: 3;
		grid-row: 1;

		@media (width < 1300px) {
			grid-column: 2;
		}

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

	> div:nth-of-type(3) {
		grid-column: 1;
		grid-row: 2;
		text-align: right;

		@media (width < 1300px) {
			grid-row: 3;
		}

		@media (width < 900px) {
			grid-column: 1;
			grid-row: 4;
			text-align: left;
		}
	}

	> div:nth-of-type(4) {
		grid-column: 3;
		grid-row: 2;

		@media (width < 1300px) {
			grid-column: 2;
			grid-row: 3;
		}

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

	img {
		grid-column: 2;
		grid-row: 1/-1;
		width: 500px;

		@media (width < 1300px) {
			grid-column: 1/-1;
			grid-row: 2;
			justify-self: center;
		}

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

/* #endregion */
/* #region Sub-FWA */
.sub-fwa-grid {
	align-items: center;
	display: grid;
	gap: 5rem 5vw;
	grid-template-columns: auto 50%;
	justify-content: center;

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

	img {
		aspect-ratio: 1;
		border-radius: 50%;
		object-fit: cover;
		outline: 1rem solid var(--steel100);
		width: 200px;
	}
}

/* #endregion */
/* #region Sub-Mission */
.sub-mission-grid {
	--text-padding: 4rem 5rem;
	display: grid;
	gap: 3rem 0;
	grid-template-columns: 1fr 1fr;

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

	div {
		background-color: var(--steel100);
		padding: var(--text-padding);

		@media (width < 1200px) {
			--text-padding: 3rem;
		}

		@media (width < 900px) {
			grid-row: auto !important;
			margin-bottom: 3rem;
		}

		@media (width < 500px) {
			--text-padding: 2rem;
		}

		&:nth-of-type(1) {
			grid-row: 1;
		}

		&:nth-of-type(3) {
			grid-row: 3;
		}

		&:nth-of-type(odd) {
			grid-column: 1;
		}
	}

	h3 {
		color: var(--blue700);
		font-size: var(--fz24);
		font-weight: 600;
		letter-spacing: 1px;
		margin-block: .5rem 1.5rem;
		text-transform: uppercase;
	}

	img {
		height: 100%;
		object-fit: cover;
		width: 100%;

		@media (width < 900px) {
			height: 30vh;
		}
	}
}

/* #endregion */
/* #region Sub-Process */
.sub-process-grid {
	display: grid;
	gap: 3rem;
	grid-template-columns: auto 50%;
	justify-content: start;

	@media (width < 700px) {
		grid-template-columns: auto;
		row-gap: 1rem;
	}

	img {
		@media (width < 700px) {
			width: 100px;
		}
	}
}

/* #endregion */
/* #region Sub-Services */
.sub-services-grid {
	--text-padding: 4rem 5rem;
	display: grid;
	gap: 3rem 0;
	grid-template-columns: 1fr 1fr;
	margin-bottom: 4rem;

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

	div {
		background-color: var(--steel100);
		padding: var(--text-padding);
		scroll-margin-top: 8rem;

		@media (width < 1000px) {
			--text-padding: 3rem;
			grid-row: auto !important;
			margin-bottom: 3rem;
		}

		@media (width < 500px) {
			--text-padding: 2rem;
			scroll-margin-top: 24rem;
		}

		&:nth-of-type(1) {
			grid-row: 1;
		}

		&:nth-of-type(3) {
			grid-row: 3;
		}

		&:nth-of-type(odd) {
			grid-column: 1;
		}
	}

	h3 {
		color: var(--blue700);
		font-size: var(--fz24);
		font-weight: 600;
		letter-spacing: 1px;
		margin-block: .5rem 1.5rem;
		text-transform: uppercase;
	}

	img {
		height: 100%;
		object-fit: cover;
		width: 100%;

		@media (width < 1000px) {
			height: 30vh;
		}
	}

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

	.video {
		--text-padding: 0;
	}
}

/* #endregion */
/* #region Sub-Team */
.sub-bio .sub-team-info {
	background-color: white;
	margin-bottom: .5rem;
	padding: 0;

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

.sub-bio-grid {
	align-items: end;
	display: grid;
	gap: 2vw;
	grid-template-columns: auto auto;
	justify-content: start;
	margin-bottom: 3rem;

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

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

	h2 {
		color: var(--blue900);
		font-size: var(--fz24);
		letter-spacing: 0;
		margin-bottom: .3rem;
		text-transform: none;
	}

	img {
		background-color: var(--blue700);
		width: 350px;
	}

	p {
		color: var(--steel700);
		font-weight: 700;
		margin-bottom: 1rem;
	}

	.role {
		font-size: var(--fz18);
		font-weight: 600;
	}
}

.sub-team-grid {
	--col-min-width: 350px;
	display: grid;
	gap: 1.5rem;
	grid-template-columns: repeat(auto-fit, minmax(var(--col-min-width), auto));
	justify-content: center;
	margin-top: 3rem;

	@media (width < 500px) {
		--col-min-width: 250px;
	}

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

	a:has(img) {
		display: block;
	}

	> div {
		background-color: var(--blue800);
		max-width: 400px;
	}

	h3 {
		letter-spacing: 0;
	}

	img {
		background: radial-gradient(circle at center, var(--blue300), var(--blue700), var(--blue900));
		background-position: center;
		background-size: 80% 80%;
		border-bottom: 3px solid var(--blue800);
		transition: var(--transition);

		&:hover {
			background-size: 150% 150%;
			border-color: var(--blue300);
		}
	}

	.role {
		color: white;
		font-size: var(--fz14);
		font-weight: 600;
		margin-bottom: .5rem;
	}
}

.sub-team-info {
	padding: 1.5rem 2rem;

	a {
		color: var(--blue300);
		display: block;
		margin-bottom: .5rem;
	}

	h3 {
		color: white;
		font-size: var(--fz20);
		margin-block: 0 .2rem;
		text-transform: none;
	}
}

.sub-team-locations-buttons-grid {
	display: grid;
	gap: .5rem;
	grid-template-columns: repeat(5, auto);
	font-size: var(--fz14);
	font-weight: 500;
	justify-content: start;
	letter-spacing: 1px;
	margin-bottom: 3rem;
	text-transform: uppercase;

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

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

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

	a {
		background-color: var(--blue100);
		border-radius: var(--radius);
		color: var(--blue700);
		overflow: hidden;
		padding: .8rem 1rem;
		text-align: center;
		text-box-trim: trim-end;
		text-decoration: none;

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

		&[aria-current="page"] {
			background-color: var(--blue500);
			color: white;
		}
	}
}

.sub-team-locations-grid {
	display: grid;
	gap: 2rem;
	grid-template-columns: repeat(3, max-content);
	justify-content: start;
	margin-bottom: 6rem;

	@media (width < 1200px) {
		grid-template-columns: repeat(2, max-content);
	}

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

	a {
		display: block;
		overflow: hidden;
	}

	> div {
		border: 1px solid var(--blue300);
		justify-self: center;
		padding: .5rem;
		text-align: center;
		transition: var(--transition);

		&:hover, &:focus-within {
			background-color: var(--blue100);
			border-color: var(--blue300);
			translate: 0 -4px;
		}
	}

	h3 {
		font-size: var(--fz20);
		font-weight: 700;
		margin-block: 1rem .5rem;
	}

	img {
		aspect-ratio: 1.25;
		margin-inline: auto;
		transition: var(--transition);
		width: 300px;
	}

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

/* #endregion */
/* #region Sub-Values */
.sub-values {
	background: linear-gradient(to right, var(--blue050-90), var(--blue050-90)), url("https://ripcord.sirv.com/Clarity/shutterstock_2353012835.jpg") center/cover no-repeat;
}

.sub-values-grid {
	display: grid;
	gap: 3rem;
	grid-template-columns: repeat(4, 1fr);

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

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

	h3 {
		letter-spacing: 0;
		text-transform: none;
	}
}

/* #endregion */
/* #region Sub-Who */
.sub-who-grid {
	display: grid;
	gap: 3rem 5rem;
	grid-auto-flow: column;

	@media (width < 900px) {
		grid-auto-flow: row;
	}

	img {
		box-shadow: 1rem 1rem 0 0 var(--steel100);

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

/* #endregion */