@import url("https://fonts.googleapis.com/css2?family=Karla:wght@300;400;500;600;700&display=swap");

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

/* #endregion */
/* #region :root */
:root {
	/* Colors */
	--black-20: hsl(0 0% 0% / .2);
	--black-40: hsl(0 0% 0% / .4);
	--black-80: hsl(0 0% 0% / .8);
	--gold500: hsl(45 65% 54%);
	--green100: hsl(128 6% 95%);
	--green300: hsl(128 2% 68%);
	--green700: hsl(128 43% 21%);
	--green700-95: hsl(128 43% 21% / .95);
	--white-50: hsl(0 0% 100% / .5);
	--white-70: hsl(0 0% 100% / .7);
	--white-90: hsl(0 0% 100% / .9);
	/* Fonts */
	--font-sans: "Karla", 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);
	/* Gradients */
	--hero-grad: linear-gradient(to bottom, var(--black-80), var(--black-20));
	--subback-grad: linear-gradient(to bottom, transparent, var(--black-40));
	/* Images */
	--hero-bg: url("https://ripcord.sirv.com/Buckhorn/iStock-941009200.jpg?cy=200");
	--subback-about-bg: url("https://ripcord.sirv.com/Buckhorn/shutterstock_766886038.jpg?cy=500");
	--subback-approach-bg: url("https://ripcord.sirv.com/Buckhorn/AdobeStock_187023397.jpeg");
	--subback-contact-bg: url("https://ripcord.sirv.com/Buckhorn/AdobeStock_27188223.jpeg");
	--subback-insights-bg: url("https://ripcord.sirv.com/Buckhorn/shutterstock_1099386764.jpg");
	--subback-news-bg: url("https://ripcord.sirv.com/Buckhorn/Dollarphotoclub_86702733.jpg?ch=1400");
	--subback-risk-bg: url("https://ripcord.sirv.com/Buckhorn/shutterstock_603657953.jpg");
	--subback-services-bg: url("https://ripcord.sirv.com/Buckhorn/Fotosearch_k2444487.jpg");
}

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

a {
	color: var(--green700);
	text-decoration: none;
	transition: all .2s ease-in-out;

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

body {
	background-color: var(--green700);
	color: var(--black-80);
	font-family: var(--font-sans);
}

h1,
h2,
h3 {
	font-weight: 500;
	line-height: 1.1;
}

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

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

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

li {
	list-style-position: outside;
}

p {
	font-size: var(--fz18);
	line-height: 1.6;
	margin-bottom: 1.2em;
}

sup {
	font-size: .7em;
	top: -.4em;
	margin: 0 1px;
	position: relative;
	vertical-align: 0;
}

/* #endregion */
/* #region Global */
.bar-title-sub--cta {
	font-size: calc(.9rem + .2vw);
	line-height: 1.5em;
	margin-bottom: 2rem;
}

.bar-title-sub--intro {
	font-size: calc(.9rem + .2vw);
	line-height: 1.5em;
	margin-bottom: 1rem;
}

.btn {
	display: inline-block;
	font-weight: 500;
	line-height: 1;
	padding: 1rem 2rem;
	transition: all .2s;

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

.contact-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	margin-bottom: 2rem;
}

.content {
	margin: 0 auto;
	max-width: 1180px;
	overflow: hidden;
	padding: 0 30px;
}

/* #endregion */
/* #region CTA */
.cta {
	background-color: var(--gold500);
	color: white;
	padding-block: 4rem;
	text-align: center;

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

.cta-btn {
	border: 2px solid var(--white-90);
	color: white;
	font-size: calc(.8rem + .2vw);

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

/* #endregion */
/* #region EBook */
.ebook-formbox {
	form {
		margin-top: 3rem;
		max-width: 50%;
		padding: 0 !important;
	}
}

.ebook-grid {
	display: grid;
	grid-gap: 2rem 4rem;
	grid-template-columns: auto auto;
	margin-top: 2rem;
}

.ebook-teaseline {
	font-size: 1.3rem;
}

/* #endregion */
/* #region Footer */
.footer {
	color: var(--white-50);
	padding-block: 4rem 8rem;
	text-align: center;

	a {
		color: var(--white-70);
		transition: color .2s;

		&:hover {
			color: white;
			text-decoration: none;
		}
	}
}

.footer-address {
	text-align: left;
}

.footer-contact {
	p {
		font-size: 1.2rem;
	}
}

.footer-grid {
	display: grid;
	grid-gap: 2rem;
	grid-template-columns: 1fr auto 1fr;
	margin-bottom: 1rem;
}

/* #endregion */
/* #region Header */
.header {
	background-color: var(--white-90);
	box-shadow: 0 .5rem 2rem .2rem var(--black-20);
	padding: 1rem 0;
	position: fixed;
	width: 100%;
	z-index: 10;
}

.header-grid {
	align-items: center;
	display: grid;
	grid-column-gap: 3em;
	grid-template-columns: auto 1fr auto;
}

/* #endregion */
/* #region Hero */
.hero {
	background: var(--hero-grad), var(--hero-bg) center/cover;
	text-align: center;

	h1 {
		animation: fadeup 2s ease-out 1s forwards;
		color: var(--white-90);
		font-size: var(--fz76);
		font-weight: 400;
		letter-spacing: -1px;
		margin-bottom: .3em;
		opacity: 0;
	}
}

.hero-btn {
	animation: fadeup 1s ease-out 4s forwards;
	background-color: var(--white-70);
	border: 2px solid var(--green700);
	color: var(--green700);
	letter-spacing: 1px;
	opacity: 0;
	text-transform: uppercase;

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

.hero-container {
	padding: calc(5rem + 7vw) 0 15vw;
}

.hero-title-sub {
	animation: fadeup 2s ease-out 3s forwards;
	color: var(--white-90);
	font-size: calc(1.2rem + .2vw);
	line-height: 1.3;
	margin-bottom: 1.5rem;
	opacity: 0;
}

/* #endregion */
/* #region Home-Boxes */
.home-boxes {
	background-color: var(--green100);
	padding-block: 4rem;
	text-align: center;

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

.home-boxes-grid {
	display: grid;
	grid-column-gap: 2rem;
	grid-template-columns: repeat(3, 1fr);
}

.home-boxes-item {
	i {
		color: var(--green700);
		cursor: pointer;
		font-size: 2rem;
		margin-bottom: 1rem;
	}
}

.home-boxes-item-text p {
	margin-bottom: 0;
}

.home-boxes-item-title {
	font-size: calc(1rem + .4vw);
	line-height: 1.2;
	margin-bottom: .4em;
}

/* #endregion */
/* #region Home-EBook */
.home-ebook {
	background-color: white;
	padding-block: 4rem;

	h2 {
		font-size: var(--fz28);
		font-weight: 700;
		margin-bottom: 2rem;
		text-align: center;
	}

	img {
		display: block;
		margin-inline: auto;
	}
}

.home-ebook-grid {
	display: grid;
	gap: 2rem 4rem;
	grid-template-columns: auto auto;

	.btn {
		background-color: var(--green100);
		border: 2px solid var(--green700);
		color: var(--green700);
		font-size: calc(.8rem + .1vw);
		letter-spacing: 1px;
		text-transform: uppercase;

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

/* #endregion */
/* #region Home-Intro */
.home-intro {
	background-color: white;
	padding-block: 4rem;
	text-align: center;

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

.home-intro-btn {
	border: 2px solid var(--green700);
	color: var(--green700);
	font-size: calc(.8rem + .1vw);
	letter-spacing: 1px;
	text-transform: uppercase;

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

/* #endregion */
/* #region Logo */
.logo {
	width: 300px;
}

/* #endregion */
/* #region Nav */
.nav {
	a {
		color: var(--green700);
		padding: .6em .8em;
		text-decoration: none;
		text-transform: uppercase;

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

.nav-client,
.nav-home {
	display: none;
}

.nav-contain {
	justify-self: end;
}

.nav-grid {
	display: grid;
	grid-auto-flow: column;
	justify-content: start;
}

.nav-toggle {
	display: none;
}

/* #endregion */
/* #region Newsletter */
.newsletter {
	background-color: var(--green300);
	color: white;
	padding-block: 4rem;
	text-align: center;

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

.newsletter-form {
	margin: 0 auto;
	width: 280px;
}

/* #endregion */
/* #region Sub */
.sub {
	background-color: white;
	padding: 4rem 0;
	text-align: left;

	h1 {
		border-bottom: 1px dotted var(--green300);
		font-size: calc(1.5rem + .5vw);
		letter-spacing: 3px;
		margin-bottom: 3rem;
		padding-bottom: .5em;
		text-transform: uppercase;
	}

	h2 {
		font-size: calc(1.1rem + .2vw);
		letter-spacing: 1px;
		margin: 2em 0 .7em;
		text-transform: uppercase;
	}

	li {
		margin-left: 1.2rem;

		& + li {
			padding-top: 1rem;
		}
	}
}

.sub--contact {
	background-color: white;
	padding: 4rem 0 0;
	text-align: left;
}

/* #endregion */
/* #region Sub-Bio */
.sub-bio-grid {
	display: grid;
	grid-column-gap: 2rem;
	grid-template-columns: auto auto;
	grid-template-rows: repeat(3, auto);
	margin-top: 2rem;

	h3 {
		font-size: calc(1.1rem + .4vw);
		margin-bottom: .2em;
	}

	h4 {
		font-size: calc(.8rem + .1vw);
		letter-spacing: 1px;
		margin-bottom: 2rem;
		text-transform: uppercase;
	}

	img {
		background-color: var(--black-80);
		margin-bottom: .6rem;
		max-width: 220px;
	}

	p:last-of-type {
		margin-bottom: 4rem;
	}
}

/* #endregion */
/* #region Sub-Insights */
.sub-insights-grid {
	--col-min-width: 300px;
	display: grid;
	gap: 4rem;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--col-min-width)), auto));
	justify-content: start;
}

.sub-insights-new::after {
	color: orange;
	content: 'new';
	display: inline-block;
	font-size: .7rem;
	font-weight: 700;
	text-transform: uppercase;
	transform: translate(.2em, -.7em);
}

/* #endregion */
/* #region Sub-Services */
.sub-services-grid {
	display: grid;
	margin-left: 1rem;

	h3 {
		letter-spacing: 1px;
		margin-block: 1rem .3rem;
		text-transform: uppercase;
	}
}

/* #endregion */
/* #region SubBack */
.subback {
	height: calc(18rem + 12vw);
}

.subback-about {
	background: var(--subback-grad), var(--subback-about-bg) center/cover, black;
}

.subback-approach {
	background: var(--subback-grad), var(--subback-approach-bg) center/cover, black;
}

.subback-contact {
	background: var(--subback-grad), var(--subback-contact-bg) center/cover, black;
}

.subback-insights {
	background: var(--subback-grad), var(--subback-insights-bg) center/cover, black;
}

.subback-news {
	background: var(--subback-grad), var(--subback-news-bg) center/cover, black;
}

.subback-risk {
	background: var(--subback-grad), var(--subback-risk-bg) center/cover, black;
}

.subback-services {
	background: var(--subback-grad), var(--subback-services-bg) center/cover, black;
}

/* #endregion */
/* #region Utility */
.u-gridline {
	grid-column: 1/-1;
}

.u-nobullets {
	list-style-type: none;
	margin: 1.5rem 0 0 -1.2rem;
}

.u-risk-graphic {
	float: right;
	padding-left: 2rem;
}

.u-sidequote {
	color: var(--green300);
	float: right;
	font-size: 1.8rem;
	font-weight: 300;
	line-height: 1.2;
	max-width: 18rem;
	padding: 0 0 3rem 4rem;
}

/* #endregion */
/* #region IDs */
#advisor_stream_embed {
	> div {
		display: grid;
		gap: 2rem 0;
	}
}

/* #endregion */
@media (max-width: 1100px) {

	.contact-grid,
	.footer-grid,
	.nav-grid,
	.sub-bio-grid {
		grid-template-columns: 1fr;
	}

	.footer-address {
		text-align: center;
	}

	.logo {
		width: 200px;
	}

	.nav {
		background-color: var(--green700-95);
		bottom: 0;
		left: 100vw;
		position: fixed;
		top: 0;
		transition: transform .3s ease-in-out;
		width: 60vw;

		&:target {
			transform: translateX(-60vw);
		}

		a {
			color: var(--white-70);

			&:hover {
				background-color: transparent;
				color: white;
			}
		}
	}

	.nav-client,
	.nav-home {
		display: block;
	}

	.nav-grid {
		grid-auto-flow: row;
		padding-left: 10vw;

		> div {
			padding: 1rem 0 0;

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

	.nav-toggle {
		display: block;
	}

	.nav-toggle-close {
		display: block;
		font-size: var(--fz48);
		padding: 1rem 3rem 0 0;
		text-align: right;
	}

	.nav-toggle-open {
		font-size: 1.5rem;
	}

	.u-risk-graphic {
		display: none;
	}
}

@media (max-width: 700px) {
	.ebook-formbox {
		form {
			max-width: 100%;
		}
	}

	.ebook-grid {
		grid-template-columns: auto;
	}

	.home-boxes-grid {
		grid-gap: 4rem;
		grid-template-columns: 1fr;
	}

	.home-ebook-grid {
		grid-template-columns: auto;
	}

	.nav {
		width: 100vw;

		&:target {
			transform: translateX(-100vw);
		}
	}

	.u-sidequote {
		display: none;
	}
}

@media (max-width: 500px) {
	.header {
		padding: .5rem;
	}

	.header-grid {
		grid-template-columns: 1fr;
		justify-items: center;
	}

	.logo {
		margin-bottom: .2rem;
	}

	.nav-contain {
		justify-self: center;
	}
}