/* #region @keyframes */
@keyframes heroFadeIn {
	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;
	}
}

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

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

a {
	color: var(--red500);
	line-height: 1;
	position: relative;
	text-decoration: none;
	transition: color var(--transition);

	&::after {
		background-color: transparent;
		bottom: -1px;
		content: "";
		height: 2px;
		left: 0;
		position: absolute;
		transition: width var(--transition);
		width: 0;
	}

	&:hover:not(.btn):not(:has(img, i))::after {
		background-color: currentColor;
		width: 100%;
	}
}

body {
	color: var(--blue500);
	font-family: var(--font-sans);
	line-height: 1.1;
}

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

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

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

html {
	interpolate-size: allow-keywords;
	scroll-behavior: smooth;
	scroll-padding-top: 11rem;
	scrollbar-gutter: stable;

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

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

p {
	font-size: var(--fz20);
	line-height: 1.5;
	margin-bottom: 1lh;
	max-width: 75ch;
	text-wrap: pretty;
}

sup {
	font-size: .9em;
}

/* #endregion */
/* #region Global */
.btn {
	--btn-bg: var(--red600);
	background-color: var(--btn-bg);
	border: 2px solid transparent;
	border-radius: var(--radius);
	color: white;
	display: inline-block;
	font-size: var(--fz14);
	font-weight: 500;
	letter-spacing: 2px;
	line-height: 1.5;
	padding: 1.3em 1.7em;
	position: relative;
	text-decoration: none;
	text-transform: uppercase;
	transition: var(--transition);

	&:hover {
		background-color: var(--btn-bg-hover, white);
		border-color: var(--btn-bg);
		color: var(--btn-bg);
		text-align: center;
	}
}

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

.cta {
	--bg-color: var(--blue050);
	background:
		url("https://ripcord.sirv.com/Cox/topo-red.png") left/contain no-repeat,
		url("https://ripcord.sirv.com/Cox/topo-yellow.png") right/contain no-repeat,
		var(--bg-color);
	border-image: linear-gradient(to right, var(--red500), var(--blue100), var(--yellow500)) 1;
	border-top: 2px solid;
	padding-block: 5rem;
	text-align: center;

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

	p {
		font-size: var(--fz36);
		font-weight: 700;
		line-height: 1.3;
		margin-bottom: 1.5rem;
	}
}

.disclaimer {
	color: hsl(180 50 50);
	font-size: var(--fz14);
	margin-inline: auto;
}

.fee-table {
	table {
		border-collapse: collapse;
	}

	th, td {
		border: 1px solid var(--blue200);
		padding: 1rem;

		@media (width < 300px) {
			padding: .5rem;
		}
	}

	th {
		background-color: var(--blue500);
		color: white;
		font-weight: 600;
	}
}

/* #endregion */
/* #region Nav */
.nav-grid {
	display: grid;
	gap: 3rem 2vw;
	grid-auto-flow: column;

	@media (width < 1200px) {
		align-content: start;
		background-color: var(--blue900-80);
		backdrop-filter: blur(8px);
		grid-auto-flow: row;
		height: 100vh;
		justify-content: center;
		opacity: 0;
		padding: 6rem 1rem 0;
		position: absolute;
		right: 0;
		top: 0;
		transition: var(--transition);
		visibility: hidden;
		width: 100vw;
	}

	a {
		color: white;
		font-size: var(--fz14);
		font-weight: 600;
		letter-spacing: 2px;
		position: relative;
		text-decoration: none;
		text-transform: uppercase;
		transition: var(--transition);

		@media (width < 1200px) {
			font-size: var(--fz24);
			translate: 0 2rem;

			&::after {
				display: none;
			}
		}

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

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

		&:last-of-type {
			color: var(--red500);
		}
	}
}

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

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

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

	.nav-grid {
		opacity: 1;
		visibility: visible;
		z-index: 10;

		a {
			translate: 0;
		}
	}
}

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

	.logo {
		width: 300px;

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

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

	&.scrolled {
		background: var(--blue900-80);
	}

	.skip {
		--btn-offset: 1rem;
		background-color: var(--blue500);
		color: white;
		left: var(--btn-offset);
		padding: .5rem 1rem;
		position: absolute;
		transition: var(--transition);
		translate: 0 calc(-100% - var(--btn-offset));
		z-index: 10;

		&:focus {
			translate: 0 var(--btn-offset);
		}
	}
}

.header-grid {
	align-items: center;
	display: grid;
	gap: 0 5vw;
	grid-template-columns: auto 1fr;
	justify-items: end;
}

/* #endregion */
/* #region Footer */
.footer {
	background: linear-gradient(var(--blue600-98), var(--blue600-98)), url("https://ripcord.sirv.com/Cox/AdobeStock_63194559.jpeg") center/cover;
	color: var(--blue200);
	padding-top: 4rem;

	a {
		color: var(--sky600);

		&::after {
			display: none;
		}

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

.footer-disclaimer {
	background-color: var(--blue800);
	padding-block: 3rem;

	.content {
		margin: 0 auto 2rem;
		max-width: 700px;
		text-align: center;

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

.footer-grid {
	--text-size: var(--fz16);
	display: grid;
	gap: 2.5rem 7vw;
	grid-template-columns: repeat(4, auto);
	justify-content: start;
	margin-bottom: 4rem;

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

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

	img {
		width: 220px;

		@media (width < 1000px) {
			margin-inline: auto;
		}
	}

	p {
		font-size: var(--text-size);
		margin-block: 0;
	}

	.legal {
		a {
			display: block;
			font-size: var(--text-size);
			margin-bottom: 1lh;
		}
	}

	.social {
		a {
			font-size: var(--fz24);
			margin-right: 1rem;
		}
	}
}

/* #endregion */
/* #region Hero */
.hero {
	background: linear-gradient(to bottom, var(--blue900-80), transparent), url("https://ripcord.sirv.com/Cox/icon-lg-white.png?opacity=20") 105% 85% no-repeat, url("https://ripcord.sirv.com/Cox/rv.jpg") center/cover;
	color: white;
	padding-block: 20vh 65vh;

	& * {
		animation: heroFadeIn 1s ease-in both;
	}

	h1 {
		animation-delay: .5s;
		font-size: var(--fz12);
		font-weight: 400;
		letter-spacing: 3px;
		line-height: 1.5;
		margin-bottom: 2rem;
		text-transform: uppercase;
	}

	h2 {
		font-size: var(--fz72);
		font-weight: 700;
		letter-spacing: -1px;
		line-height: 1;
		margin-bottom: 1rem;

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

	p {
		animation-delay: .5s;
		font-size: var(--fz32);
		letter-spacing: 1px;
		line-height: 1.3;
		margin-bottom: 2rem;
	}

	.btn {
		animation-delay: 1s;
	}
}

/* #endregion */
/* #region Home-Intro */
.home-intro {
	background: linear-gradient(to bottom right, var(--blue200), var(--blue050) 30%);
	padding-block: 4rem 6rem;

	h2 {
		font-size: var(--fz32);
		font-weight: 700;
		margin-bottom: .5em;
	}

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

.home-intro-grid {
	align-items: center;
	display: grid;
	gap: 2rem 5vw;
	grid-template-columns: 40% auto;

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

	.image {
		border-radius: var(--radius);
		max-width: 500px;
		position: relative;
		z-index: 10;

		&::after {
			background-color: var(--red200);
			border-radius: var(--radius);
			content: "";
			height: 100%;
			left: 0;
			position: absolute;
			top: 0;
			translate: 3rem 3rem;
			width: 100%;
			z-index: -10;

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

		img {
			border-radius: var(--radius);
		}
	}
}

/* #endregion */
/* #region Home-Investing */
.home-investing {
	background: linear-gradient(to right, var(--blue600) 10%, transparent), url("https://ripcord.sirv.com/Cox/iStock-1148091063.jpg") center/cover;
	color: white;
	padding-block: 8rem;
}

.home-investing-grid {
	align-items: center;
	display: grid;
	gap: 2rem 5vw;
	grid-template-columns: 40% auto;

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

	h2 {
		font-size: var(--fz28);
		margin-bottom: 1rem;
	}

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

.home-themes-flex {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	justify-content: center;

	a {
		background-color: var(--sky400);
		border-radius: var(--radius);
		color: var(--sky950);
		padding: 2rem 1.2rem;
		text-align: center;
		transition: var(--transition);
		width: 200px;

		&:hover {
			background-color: var(--sky200);
			scale: 1.05;
		}

		i {
			display: block;
			font-size: var(--fz32);
			margin: 0 auto .7rem;
		}
	}
}

/* #endregion */
/* #region Home-Quote */
.home-quote {
	background: var(--blue100);
	padding-block: 6rem;
	text-align: center;

	p {
		display: inline-block;
		font-size: var(--fz36);
		font-weight: 300;
		line-height: 1.2;
		margin-bottom: 1.5rem;
		position: relative;
	}

	span {
		display: block;
		font-size: var(--fz14);
		font-weight: 600;
		letter-spacing: 2px;
		text-transform: uppercase;
	}
}

/* #endregion */
/* #region Home-Services */
.home-services {
	--lower-gradient: transparent;
	background: linear-gradient(var(--blue700), var(--lower-gradient)), url("https://ripcord.sirv.com/Cox/shutterstock_1775221898.jpg") center/cover;
	color: white;
	padding-top: 3rem;

	.content {
		margin-bottom: 6rem;

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

		p {
			font-size: var(--fz20);
			font-weight: 300;
			letter-spacing: .5px;
			margin-bottom: 0;
		}
	}
}

.home-services-grid {
	--transition: .5s ease;
	align-items: end;
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	justify-content: center;

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

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

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

	a {
		align-content: end;
		align-items: end;
		background-color: var(--blue900-30);
		border-right: 1px solid var(--blue300);
		border-top: 1px solid var(--blue300);
		color: white;
		display: block;
		height: 500px;
		overflow: hidden;
		padding: 1rem;
		position: relative;
		text-align: center;
		transition: var(--transition);
		z-index: 10;

		&::before {
			background: linear-gradient(transparent, var(--blue900) 70%), var(--bg-img) center/cover;
			content: "";
			inset: 0;
			opacity: 0;
			position: absolute;
			transition: var(--transition);
			z-index: -10;

			@media (max-width: 1100px) {
				opacity: 1;
			}
		}

		/* Turn off the underline effect */
		&:hover::after {
			width: 0;
		}

		&:hover, &:focus-visible {
			&::before {
				opacity: 1;
			}

			p {
				height: auto;
				opacity: 1;
				transition: var(--transition);
			}
		}

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

		p {
			height: 0;
			margin-inline: auto;
			max-width: 80%;
			opacity: 0;
			transition: var(--transition);

			@media (max-width: 1100px) {
				height: auto;
				opacity: 1;
			}
		}

		&.asset {
			--bg-img: url("https://ripcord.sirv.com/Cox/shutterstock_105107903.jpg?cy=800");
		}

		&.generational {
			--bg-img: url("https://ripcord.sirv.com/Cox/shutterstock_628027658.jpg?cx=700");
		}

		&.planning {
			--bg-img: url("https://ripcord.sirv.com/Cox/AdobeStock_34420767.jpeg");
		}

		&.risk {
			--bg-img: url("https://ripcord.sirv.com/Cox/Dollarphotoclub_99376814.jpg?cy=200");
		}

		&.scenario {
			--bg-img: url("https://ripcord.sirv.com/Cox/compass.jpg");
		}

		&.tax {
			--bg-img: url("https://ripcord.sirv.com/Cox/1040-tax-form.jpg?cy=200");
		}
	}
}

/* #endregion */
/* #region Sub */
.sub {
	background: url("https://ripcord.sirv.com/Cox/icon-lg.png?opacity=4") 75% 60%/300px no-repeat;
	padding-block: 4rem 8rem;

	h1 {
		align-items: center;
		column-gap: .6rem;
		display: grid;
		font-size: var(--fz32);
		grid-auto-flow: column;
		justify-content: start;
		letter-spacing: 1px;
		margin-bottom: 3rem;
		text-transform: uppercase;

		img {
			aspect-ratio: 1;
			display: inline-block;
			opacity: .5;
			width: 30px;
		}
	}

	h2 {
		font-size: var(--fz28);
		font-weight: 600;
		margin-block: 2.5rem .5em;
	}

	h3 {
		font-size: var(--fz20);
		font-weight: 600;
		margin-block: 1.5rem .3em;
	}

	li {
		font-size: var(--fz20);
		line-height: 1.4;
		padding-top: .8em;

		&:first-of-type {
			padding-top: 0;
		}
	}

	ul {
		margin: 1.5rem 0 2rem 2rem;
	}
}

.subhero {
	background: linear-gradient(to bottom, var(--blue900-80), transparent), var(--bg-img) center/cover;
	height: 45vh;

	&.about {
		--bg-img: url("https://ripcord.sirv.com/Cox/bill-ethan-seminar.jpg?ch=500");
	}

	&.article {
		--bg-img: url("https://ripcord.sirv.com/Cox/iStock-627761528.jpg?ch=1500");

		@media (width < 400px) {
			--bg-img: url("https://ripcord.sirv.com/Cox/iStock-627761528.jpg?ch=1500&cw=1800");
		}
	}

	&.asset {
		--bg-img: url("https://ripcord.sirv.com/Cox/shutterstock_105107903.jpg");
	}

	&.careers {
		--bg-img: url("https://ripcord.sirv.com/Cox/shutterstock_2303744757.jpg");
	}

	&.contact {
		--bg-img: url("https://ripcord.sirv.com/Cox/shutterstock_2509741837.jpg");
	}

	&.planning {
		--bg-img: url("https://ripcord.sirv.com/Cox/AdobeStock_34420767.jpeg");
	}

	&.services {
		--bg-img: url("https://ripcord.sirv.com/Cox/shutterstock_718961860.jpg?ch=1200");
	}

	&.team {
		--bg-img: url("https://ripcord.sirv.com/Cox/shutterstock_110351363.jpg?cy=600");
	}

	&.who {
		--bg-img: url("https://ripcord.sirv.com/Cox/iStock-2039787243.jpg");
	}
}

/* #endregion */
/* #region Sub-Article */
.article {
	h1 {
		font-size: var(--fz48);
		font-weight: 600;
		letter-spacing: -1px;
		margin-bottom: 1rem;
		text-transform: none;
	}

	h2 {
		font-size: var(--fz32);
	}

	h3 {
		font-size: var(--fz24);
		font-weight: 700;
	}

	img {
		border-radius: var(--radius);
		margin-block: 2rem;
		width: 900px;
	}

	.callout-box {
		background-color: var(--sky200);
		border-radius: var(--radius);
		color: var(--sky900);
		padding: 1rem;
		width: fit-content;

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

	.date {
		background-color: var(--sky100);
		border-radius: var(--radius);
		font-size: var(--fz12);
		font-weight: 600;
		letter-spacing: 1px;
		padding: .7rem;
		text-transform: uppercase;
		width: fit-content;
	}
}

/* #endregion */
/* #region Sub-About */
.sub-about-community-links {
	columns: 2;

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

	a {
		display: block;
		font-size: var(--fz18);
		line-height: 1.4;
		margin-bottom: .5lh;
		width: fit-content;
	}
}

/* #endregion */
/* #region Sub-Asset */
.sub-asset {
	background: white;
}

.sub-asset-portfolios-grid {
	display: grid;
	gap: 2rem;
	grid-template-columns: repeat(4, 1fr);
	justify-items: center;
	margin-bottom: 3rem;
	text-align: center;

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

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

.sub-asset-themes-flex {
	background-color: var(--sky100);
	border-radius: 1rem;
	display: flex;
	flex-wrap: wrap;
	gap: 2rem;
	justify-content: center;
	margin-top: 1.5rem;
	padding: 3rem;
	text-align: center;

	> div {
		width: 280px;
	}

	h3 {
		margin-top: 0;
	}

	i {
		font-size: var(--fz28);
		margin-bottom: .5rem;
	}

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

/* #endregion */
/* #region Sub-Careers */
.sub-careers-grid {
	display: grid;
	gap: 0 5rem;
	grid-template-columns: 1fr 1fr;
	justify-content: start;

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

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

/* #endregion */
/* #region Sub-Contact */
.sub-contact-grid {
	display: grid;
	gap: 2rem 10vw;
	grid-template-columns: auto 1fr;
	justify-content: start;

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

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

/* #endregion */
/* #region Sub-Planning */
.sub-planning {
	background: white;
}

.sub-planning-process-grid {
	background-color: var(--sky100);
	border-radius: 1rem;
	display: grid;
	gap: 2rem;
	grid-template-columns: repeat(3, 1fr);
	margin-top: 1.5rem;
	padding: 4rem;

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

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

	> div {
		width: 280px;
	}

	h3 {
		margin-top: 0;
	}

	i {
		font-size: var(--fz28);
		margin-bottom: .5rem;
	}

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

.sub-planning-sample-grid {
	display: grid;
	gap: 4rem 5vw;
	grid-template-columns: 1fr 1fr;

	img {
		border-radius: .5rem;
		margin-bottom: 1rem;
	}
}

/* #endregion */
/* #region Sub-Services */
.sub-services-grid {
	display: grid;
	gap: 2rem 5vw;
	grid-template-columns: 1fr 1fr;
	justify-content: start;

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

	h2 {
		margin-top: 0;
	}

	&.featured {
		> div {
			border-radius: var(--radius);
			padding: 3rem;

			&:nth-of-type(1) {
				background-color: var(--blue050);
			}

			&:nth-of-type(2) {
				background-color: var(--sky100);
			}
		}

		.btn {
			padding: .5rem 1rem;
			text-align: center;
		}
	}
}

/* #endregion */
/* #region Sub-Team */
.sub-team-grid {
	display: grid;
	gap: 4rem 7vw;
	grid-template-columns: 1fr 1fr;
	justify-content: center;
	margin-top: 4rem;

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

	a {
		display: block;
		margin-bottom: 1rem;
		width: max-content;
	}

	h2 {
		font-size: var(--fz24);
		margin-top: 1rem;
	}

	img {
		border-radius: var(--radius);
		width: 300px;
	}

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

		&:last-of-type {
			margin-bottom: 0;
		}
	}

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

/* #endregion */
/* #region Sub-Who */
.sub-who-grid {
	display: grid;
	gap: 4rem 6vw;
	grid-template-columns: 1fr 1fr;
	justify-content: center;
	margin-top: 3rem;

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

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

	h2 {
		margin-top: 0;
	}

	p {
		margin-bottom: 0;
	}
}

/* #endregion */