html {
  scrollbar-width: none;

  &::-webkit-scrollbar {
    display: none;
  }
}

#hero {
	margin: 0 auto 3rem;
	display: grid;
	grid-template-columns: 1.2fr .8fr;
	gap: 7vw;
	align-items: center;
	min-height: 600px;
}

.eyebrow {
	font-size: 1.6rem;
	color: var(--color-gold);
	letter-spacing: .1rem;
	text-transform: uppercase;
	margin-bottom: 20px;
}

h2.intro {
	font-size: clamp(4rem, 6vw, 9rem);
	line-height: .98;
	font-weight: 400;
	margin: 0;
}

#hero-copy p {
	font-size: 3rem;
	line-height: 1.6;
	color: var(--color-text);
	margin-bottom: 1rem;
	text-wrap: balance;
}

.tagline {
	font-size: 3rem;
	color: var(--color-gold);
	font-style: italic;
}


#hero-panel {
	border: 1px solid var(--color-gold25);
	padding: 4rem;
	background: var(--color-bg1);
	backdrop-filter: blur(5px);
}

#hero-panel h2 {
	font-size: 2.9rem;
	line-height: 1.05;
	color: var(--color-gold);
	font-weight: 400;
	margin: 0 0 16px;
	text-transform: uppercase;
}

#hero-panel p {
	font-size: 18px;
	line-height: 1.6;
	color: #eee9df;
	margin: 0 0 18px;
}




#features {
	margin: 0 auto;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 0;
}

.feature {
	padding: 48px 35px;
	border-right: 1px solid var(--color-gold25);
}

.feature:first-child {
	padding-left: 0;
}
.feature:last-child {
	border-right: 0;
	padding-right: 0;
}

.feature h2 {
	font-size: 27px;
	color: var(--color-gold);
	font-weight: 400;
	margin: 0 0 13px;
}

.feature p {
	font-size: 18px;
	line-height: 1.55;
	color: #e4ded4;
	margin: 0;
}

.feature-link {
	font-size: 2rem;
	display: inline-block;
	margin-top: 17px;
	color: var(--color-gold);
	text-decoration: none;
	transition: 0.3s ease-out;
}

.feature-link::after {
	content: "»";
	padding-left: 1rem;
	text-decoration: none;
}

.feature-link:hover {
	color: var(--color-text);
	text-decoration: none !important;
}


#statement {
	max-width: 1100px;
	margin: 8rem auto;
	text-align: center;
	text-wrap: balance;
}

#statement h2 {
	font-size: clamp(34px, 4.5vw, 55px);
	font-weight: 400;
	line-height: 1.15;
	color: var(--color-gold);
	margin: 0 0 20px;
}

#statement p {
	font-size: 20px;
	line-height: 1.6;
	color: #e7e1d8;
	margin: 0 auto 26px;
	text-wrap: balance;
}

#statement .small {
	font-size: 16px;
	color: var(--color-gold);
	font-style: italic;
}

@media(max-width: 1000px){
	#hero {
		grid-template-columns: 1fr;
	}

	#hero-panel {
		padding: 3rem;
	}
}

@media(max-width: 850px){
	#features {
		grid-template-columns: 1fr;
	}

	.feature, .feature:first-child, .feature:last-child {
		padding: 3rem 1rem;
		border: none;
	}
}