/* #region @import */
@import url("https://fonts.googleapis.com/css2?family=Libre+Franklin:wght@100..900&display=swap");

/* #endregion */
/* #region @keyframes */
@keyframes fadeIn {
	to {
		opacity: 1;
	}
}

/* #endregion */
/* #region :root */
:root {
	/* Color - Black */
	--black-10: hsl(0 0% 0% / .1);
	--black-50: hsl(0 0% 0% / .5);
	--black-70: hsl(0 0% 0% / .7);
	/* Color - Brown */
	--brown300: hsl(30 16% 82%);
	--brown500: hsl(30 16% 62%);
	--brown700: hsl(30 20% 34%);
	--brown900: hsl(30 20% 15%);
	/* Color - Green */
	--green100: hsl(150 0% 96%);
	--green300: hsl(150 19% 81%);
	--green500: hsl(150 38% 48%);
	--green700: hsl(150 35% 28%);
	--green900: hsl(150 35% 13%);
	--green900-90: hsl(150 35% 15% / .9);
	/* Color - Gold */
	--gold300: hsl(36 94% 78%);
	--gold500: hsl(36 78% 50%);
	--gold700: hsl(36 68% 35%);
	--gold700-70: hsl(36 68% 34% / .7);
	/* Color - White */
	--white-50: hsl(0 100% 100% / .5);
	--white-70: hsl(0 100% 100% / .7);
	--white-90: hsl(0 100% 100% / .9);
	/* Fonts */
	--font-sans: "Libre Franklin", sans-serif;
	--fz12: .75rem;
	--fz14: .875rem;
	--fz16: 1rem;
	--fz18: clamp(1rem, 3.2vw, 1.125rem);
	--fz20: clamp(1.1rem, 3.5vw, 1.25rem);
	--fz24: clamp(1.25rem, 4vw, 1.5rem);
	--fz28: clamp(1.4rem, 4.5vw, 1.75rem);
	--fz32: clamp(1.625rem, 5.2vw, 2rem);
	--fz36: clamp(1.7rem, 5.8vw, 2.25rem);
	--fz42: clamp(1.75rem, 6.3vw, 2.625rem);
	--fz48: clamp(1.875rem, 7vw, 3rem);
	--fz60: clamp(2rem, 8vw, 3.75rem);
	--fz76: clamp(2.25rem, 10vw, 4.75rem);
	/* Utility */
	--home-section-padding: 5rem;
	--logo-width: 130px;
	--radius: .3rem;
	--transition: .3s;
}

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

a {
	color: var(--gold700);
	display: inline-block;
	line-height: 1;
	position: relative;
	text-decoration: none;
	transition: var(--transition);

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

	&:hover::after {
		width: 100%;
	}

	&:has(div, i, img, span)::after,
	&.btn::after {
		height: 0;
	}
}

body {
	background-color: white;
	color: var(--brown900);
	font-family: var(--font-sans);
}

button {
	background: none;
	border: none;
	box-shadow: none;
	cursor: pointer;
}

hr {
	border: 0;
	border-top: 1px solid var(--green300);
	margin: 2rem 0;
}

html {
	min-height: 101%;
	width: 100%;
}

img {
	height: auto;
	max-width: 100%;
}

p {
	font-size: var(--fz18);
	line-height: 1.7;
	margin-bottom: 1.2rem;
	max-width: 65ch;
}

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

/* #endregion */
/* #region Footer */
.footer {
	background-color: var(--green900);
	padding-block: 4rem 6rem;
}

.footer-grid {
	--grid-col-width: 300px;
	color: white;
	display: grid;
	gap: 1rem 3rem;
	grid-template-columns: auto auto auto 1fr;
	justify-content: start;
	width: 100%;

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

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

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

	img {
		margin-bottom: .7rem;
		opacity: .7;
		width: 100px;
	}

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

	.footer-nav a {
		display: block;
		margin-top: 1.2rem;
		width: max-content;

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

	.footer-legal {
		justify-self: end;

		@media (width < 1200px) {
			justify-self: unset;
		}

		a {
			font-size: var(--fz12);
			letter-spacing: 1px;
			margin-right: 1rem;
			text-transform: uppercase;

			@media (width < 1200px) {
				display: block;
				margin: 1.5rem 0 0 0;
				width: max-content;
			}

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

	.u-slash-divider {
		@media (width < 1200px) {
			display: none;
		}
	}
}

/* #endregion */
/* #region Global */
.btn {
	background-color: var(--gold500);
	border-radius: var(--radius);
	color: white;
	display: inline-block;
	font-size: var(--fz14);
	font-weight: 500;
	letter-spacing: 1px;
	padding: 1.5rem;
	text-decoration: none;
	text-transform: uppercase;
	transition: var(--transition);

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

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

.ripcord {
	font-size: var(--fz12);
	letter-spacing: 1px;
	margin-top: 3rem;
	text-align: center;
	text-transform: uppercase;
}

/* #endregion */
/* #region Header */
.header {
	background: linear-gradient(to right, var(--green900), var(--green700));
	padding-block: 1rem 1.2rem;
	position: fixed;
	transition: var(--transition);
	width: 100%;
	z-index: 10;

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

.header-grid {
	align-items: center;
	display: grid;
	gap: 2rem;
	grid-template-columns: var(--logo-width) auto;
}

/* #endregion */
/* #region Hero */
.hero {
	--bgimg: url("https://ripcord.sirv.com/1911Trust/shutterstock_584685469.jpg?cx=50") center/cover no-repeat;
	--lines: url("https://ripcord.sirv.com/1911Trust/lines-white.png?opacity=30") center 10%/auto no-repeat;
	--logo: url("https://ripcord.sirv.com/1911Trust/logo.png?opacity=50") center 90% no-repeat;
	--overlay: linear-gradient(var(--black-50), transparent);
	background: var(--overlay), var(--lines), var(--logo), var(--bgimg);
	color: white;
	height: 100vh;
	padding-block: 25vh;
	text-align: center;

	h1 {
		animation: fadeIn 2s forwards .5s;
		font-size: var(--fz48);
		font-weight: 500;
		margin-bottom: 1rem;
		opacity: 0;
	}

	p {
		animation: fadeIn 2s forwards 1s;
		font-size: var(--fz20);
		line-height: 1.7;
		margin: 0 auto 3rem;
		max-width: 55ch;
		opacity: 0;
	}

	.btn {
		animation: fadeIn 2s forwards 1.5s;
		opacity: 0;
	}
}

/* #endregion */
/* #region Home-Intro */
.home-intro {
	--lines: url("https://ripcord.sirv.com/1911Trust/lines-gold.png?opacity=40") center 10%/auto no-repeat;
	background: var(--lines);
	padding-block: var(--home-section-padding);
}

.home-intro-about-grid {
	display: grid;
	gap: 2rem 5vw;
	grid-template-columns: auto 200px;
	justify-content: center;
	margin-inline: auto;

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

	a {
		color: var(--gold700);
		font-size: var(--fz14);
		font-weight: 500;
		letter-spacing: 1px;
		text-transform: uppercase;
	}

	h2 {
		font-weight: 500;
		margin-bottom: 1rem;
		max-width: 30ch;
	}

	img {
		transition: var(--transition);

		&:hover {
			scale: 1.04;
		}
	}

	p {
		line-height: 1.7;
		max-width: 48ch;
	}
}

.home-intro-services-box {
	/* background: linear-gradient(var(--green700), var(--green500) 30%, var(--green500) 40%, var(--green900)); */
	background: linear-gradient(to top right, var(--green900), var(--green500));
	border-radius: var(--radius);
	box-shadow: 2px 2px 8px 4px var(--black-10);
	color: var(--green100);
	margin: auto auto -2rem;
	padding: 3rem;
	text-align: center;
	translate: 0 calc((var(--home-section-padding) + 2rem) * -1);
	max-width: 1000px;
}

.home-intro-services-box-grid {
	display: grid;
	gap: 2rem 0;
	grid-template-columns: 1fr auto 1fr;

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

	a {
		color: var(--green100);
		font-weight: 500;

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

			i {
				scale: 1.15;
			}
		}

		&:last-of-type {
			color: var(--gold500);
			font-size: var(--fz14);
			letter-spacing: 1px;
			text-transform: uppercase;
		}
	}

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

	i {
		display: inline-block;
		color: var(--gold500);
		font-size: var(--fz36);
		margin-bottom: 1rem;
		transition: var(--transition);
	}
}

/* #endregion */
/* #region Home-Meet */
.home-meet {
	background: linear-gradient(to right, var(--gold500), var(--gold500) 50%, var(--gold700) 50%);
	color: white;

	.content {
		background: linear-gradient(to right, transparent, var(--gold700) 50%), url("https://ripcord.sirv.com/1911Trust/shutterstock_2353012835.jpg?cx=400&cy=100") left/contain no-repeat;
		min-height: 40vh;
		padding-block: 6rem;

		@media (width < 900px) {
			background: linear-gradient(to right, var(--gold700-70), var(--gold700) 70%), url("https://ripcord.sirv.com/1911Trust/shutterstock_2353012835.jpg?cx=400&cy=100") center/cover no-repeat;
			padding-block: 10rem 4rem;
		}

		.textbox {
			margin-left: 50%;
			width: 40%;

			@media (width < 900px) {
				margin-inline: auto;
				width: 80%;
			}

			a {
				color: white;
				text-transform: uppercase;
				font-size: var(--fz14);
				font-weight: 500;
				letter-spacing: 1px;
				margin-top: 1rem;
			}

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

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

/* #endregion */
/* #region Logo */
.logo {
	img {
		width: var(--logo-width);
		transition: var(--transition);
	}

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

/* #endregion */
/* #region Nav */
.nav-contain {
	justify-self: center;

	@media (width < 1200px) {
		justify-self: end;
	}
}

.nav-grid {
	display: grid;
	gap: 2rem 1.5vw;
	grid-auto-flow: column;

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

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

	a {
		color: white;
		letter-spacing: 1px;

		&:hover, &:hover::after {
			color: var(--gold500);
		}

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

			&::after {
				display: none;
			}
		}

		&:last-of-type {
			color: var(--gold500);
			font-size: var(--fz14);
			font-weight: 500;
			letter-spacing: 1px;
			margin-left: 5vw;
			text-transform: uppercase;

			@media (width < 1200px) {
				font-size: var(--fz16);
				margin-left: 0;
			}
		}
	}
}

.nav-toggle {
	display: none;

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

.open {
	.fa-xmark-large {
		display: block;
		rotate: 270deg;
		transition: .8s;
		z-index: 10;
	}

	.nav-grid {
		translate: 0;
		visibility: visible;
		z-index: 5;
	}

	.nav-toggle {
		rotate: 180deg;
		z-index: 20;
	}
}

/* #endregion */
/* #region Sub */
.sub {
	background-color: white;
	min-height: 70vh;
	padding-block: min(20vh, 12rem) 8rem;

	h1 {
		font-size: var(--fz36);
		font-weight: 600;
		margin-bottom: .5em;

		i {
			margin-right: 1rem;
		}
	}

	h2 {
		font-size: var(--fz24);
		font-weight: 600;
		margin-block: 2rem .6rem;
	}

	h3 {
		margin-block: 2rem .8rem;
	}

	li {
		font-size: var(--fz18);
		max-width: 70ch;
		padding-left: .3rem;

		+ li {
			margin-top: 1.8rem;
		}
	}

	ul {
		margin-top: 0;
		padding: 0 1rem 2rem;
	}

	.content {
		@media (width < 1200px) {
			padding-right: 0;
		}
	}
}

/* #endregion */
/* #region SubGrad */
.subgrad {
	background: linear-gradient(to right, white 0%, white 50%, var(--white-90) 70%, var(--white-70) 80%, var(--white-50) 90%, transparent), var(--subpage-img) center/cover no-repeat;

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

/* #endregion */
/* #region Sub-Pages */
.sub-about {
	--subpage-img: url("https://ripcord.sirv.com/1911Trust/AdobeStock_175395875.jpg");
}

.sub-trust {
	--subpage-img: url("https://ripcord.sirv.com/1911Trust/shutterstock_374240.jpg");
}

.sub-wealth {
	--subpage-img: url("https://ripcord.sirv.com/1911Trust/iStock-529667578.jpg");
}

/* #endregion */
/* #region Sub-Team */
.sub-team {
	div {
		margin-bottom: .3em;
	}

	h2 {
		margin-block: 0 .2em;
	}

	img {
		border-radius: var(--radius);
		height: 350px;
		object-fit: cover;
		width: 250px;
	}

	.role {
		font-weight: 600;
	}
}

.sub-team-bio-grid {
	display: grid;
	gap: 1rem 3vw;
	grid-template-columns: auto auto;
	justify-content: start;
	margin-top: 2rem;

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

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

	img {
		background-color: var(--brown300);
		margin-bottom: .5rem;
	}
}

.sub-team-grid {
	--grid-col-width: 250px;
	display: grid;
	font-size: var(--fz14);
	gap: 2rem 2vw;
	grid-template-columns: repeat(auto-fit, minmax(min(var(--grid-col-width), 100%), 1fr));
	justify-content: center;
	margin-top: 4rem;

	img {
		background-color: var(--brown300);
		margin-bottom: .5rem;
		transition: var(--transition);

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

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

/* #endregion */
/* #region Utility */
.u-back {
	font-size: var(--fz12);
	font-weight: 500;
	letter-spacing: 1px;
	text-transform: uppercase;
}

.u-callout {
	color: var(--brown700);
	font-size: var(--fz24);
	margin-bottom: 0;
}

.u-colorbox {
	border-radius: var(--radius);
	margin-bottom: 2rem;
	padding: 3.5rem;

	@media (width < 900px) {
		padding: 2rem;
	}

	ul {
		padding-bottom: 0;
	}

	&.brown {
		background: linear-gradient(to right, var(--brown300), transparent);
	}

	&.gold {
		background: linear-gradient(to right, var(--gold300), transparent);
	}

	&.green {
		background: linear-gradient(to right, var(--green300), transparent);
	}
}

.u-disclaimer {
	font-size: var(--fz12);
}

.u-list-plain {
	margin-top: 1rem !important;

	li {
		list-style: none;
		margin: .5rem 0 0 -1rem !important;
		padding: 0 !important;
	}
}

.u-pip {
	background-color: var(--brown300);
	height: 5px;
	margin-block: 3rem;
	width: min(30%, 4rem);
}

.u-skip {
	background-color: black;
	color: white;
	left: 1rem;
	padding: .5rem 1rem;
	position: absolute;
	text-decoration: none;
	top: -100%;
	z-index: 100;

	&:focus {
		top: 1rem;
	}
}

.u-slash-divider {
	background: linear-gradient(transparent, var(--green300), transparent);
	margin-inline: 3rem;
	width: 1px;
}

/* #endregion */