/* #region @keyframes */
@keyframes fadeIn {
	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(--gold700);
	display: inline-block;
	line-height: 1;
	position: relative;
	text-decoration: none;
	transition: var(--transition);

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

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

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

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

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

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

hr {
	border: 0;
	border-top: var(--px01) solid var(--green300);
	margin: var(--px48) 0;
}

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

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

img {
	max-width: 100%;
}

p {
	font-size: var(--fz18);
	line-height: 1.7;
	margin-bottom: var(--px20);
	max-width: 65ch;
	text-wrap: pretty;

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

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

/* #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: var(--px01);
	padding: var(--px24);
	text-transform: uppercase;
	transition: var(--transition);

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

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

.colorbox {
	border-radius: var(--radius-lg);
	margin-block: var(--px32);
	padding: var(--px64);

	@media (width < 900px) {
		padding: var(--px32);
	}

	ul {
		padding-bottom: 0 !important;
	}

	&.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);
	}
}

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

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

.pip {
	background-color: var(--brown300);
	height: var(--px04);
	margin-block: var(--px32);
	width: var(--px40);
}

.slash-divider {
	background: linear-gradient(transparent, var(--green300), transparent);
	margin-inline: var(--px48);
	width: var(--px01);
}

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

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

.nav-grid {
	display: grid;
	gap: var(--px32) 1.5vw;
	grid-auto-flow: column;

	@media (width < 1200px) {
		--mobile-menu-width: 60vw;
		align-content: start;
		backdrop-filter: blur(var(--px04));
		background-color: var(--black-70);
		grid-auto-flow: row;
		height: 100vh;
		justify-content: center;
		padding: var(--px96) var(--px16) 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: var(--px01);

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

			&::after {
				display: none;
			}
		}

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

		&:last-of-type {
			color: var(--gold500);
			font-size: var(--fz14);
			font-weight: 500;
			letter-spacing: var(--px01);
			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;
		z-index: 10;
	}
}

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

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

	.nav-toggle {
		rotate: 180deg;
	}
}

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

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

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

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

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

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

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

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

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

.footer-grid {
	color: white;
	display: grid;
	gap: var(--px16) var(--px48);
	grid-template-columns: auto auto auto 1fr;
	justify-content: start;
	width: 100%;

	@media (width < 700px) {
		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: var(--px12);
		opacity: .7;
		width: 100px;
	}

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

	.legal {
		justify-self: end;

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

		a {
			font-size: var(--fz12);
			letter-spacing: var(--px01);
			margin-right: var(--px16);
			text-transform: uppercase;

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

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

	.nav a {
		display: block;
		margin-top: var(--px20);
		width: max-content;

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

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

/* #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 both .5s;
		font-size: var(--fz48);
		font-weight: 500;
		margin-bottom: var(--px16);
	}

	p {
		animation: fadeIn 2s both 1s;
		font-size: var(--fz20);
		margin: 0 auto var(--px48);
		max-width: 55ch;
	}

	.btn {
		animation: fadeIn 2s both 1.5s;
	}
}

/* #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);

	.about {
		display: grid;
		gap: var(--px32) 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: var(--px01);
			text-transform: uppercase;
		}

		h2 {
			font-weight: 500;
			margin-bottom: var(--px16);
			max-width: 30ch;
		}

		img {
			transition: var(--transition);

			&:hover {
				scale: 1.04;
			}
		}

		p {
			max-width: 48ch;
		}
	}

	.services-box {
		background: linear-gradient(to top right, var(--green900), var(--green500));
		border-radius: var(--radius-lg);
		box-shadow: var(--px02) var(--px02) var(--px08) var(--px04) var(--black-10);
		color: var(--green100);
		margin: auto auto -2rem;
		max-width: 1000px;
		padding: var(--px48);
		text-align: center;
		translate: 0 calc((var(--home-section-padding) + var(--px32)) * -1);
	}

	.services-box-grid {
		display: grid;
		gap: var(--px32) 0;
		grid-template-columns: 1fr auto 1fr;

		@media (width < 700px) {
			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: var(--px01);
				text-transform: uppercase;
			}
		}

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

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

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

/* #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: var(--px96);

		@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: var(--px160) var(--px64);
		}

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

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

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

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

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

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

	h1 {
		font-size: var(--fz32);
		font-weight: 600;
		margin-bottom: var(--px08);

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

	h2 {
		font-size: var(--fz24);
		font-weight: 600;
		margin-block: var(--px40) var(--px12);
	}

	h3 {
		margin-block: var(--px32) var(--px12);
	}

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

		+ li {
			margin-top: var(--px28);
		}
	}

	ul {
		margin-top: 0;
		padding: 0 var(--px16) var(--px32);
	}

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

	.list-directors {
		list-style-type: none;
		margin-top: var(--px16);

		li {
			margin: var(--px08) 0 0 -1rem;
			padding: 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 {
	img {
		background-color: var(--brown300);
		border-radius: var(--radius);
		height: 350px;
		object-fit: cover;
		width: 250px;
	}

	.back {
		font-size: var(--fz12);
		font-weight: 500;
		letter-spacing: 1px;
		margin-bottom: var(--px32);
		text-transform: uppercase;
	}

	.thumbnails-flex {
		display: flex;
		flex-wrap: wrap;
		gap: var(--px48);
		justify-content: center;
		list-style: none;
		margin-top: var(--px64);
		padding: 0;

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

		img {
			background-color: var(--brown300);
			margin-bottom: var(--px08);
			transition: var(--transition);

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

		li {
			flex: 0 1 250px;
			margin: 0;
		}

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

			.name {
				font-size: var(--fz18);
			}
		}
	}

	.titleblock {
		p {
			margin-bottom: 0;
		}

		.name {
			margin-block: 0;
		}

		.title {
			font-weight: 600;
		}
	}
}

/* #endregion */
/* #region Sub-Team-Bio */
.bio-flex {
	display: flex;
	flex-wrap: wrap;
	gap: var(--px24) var(--px48);

	.bio-text {
		flex: 1 35ch;

		h2 {
			font-size: var(--fz14);
			font-weight: 700;
			letter-spacing: var(--px02);
			margin-block: var(--px40) var(--px12);
			text-transform: uppercase;

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

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

		.titleblock {
			.name {
				font-size: var(--fz24);
			}
		}
	}
}

/* #endregion */