:root {
	font-size: 1rem;
	line-height: 1.5;

	--content-width: 80.5rem;

	--shade-lt: #e8e1d6;
	--shade-md: #484748;
	--shade-dk: #202125;
	--logo-graphic: #28292c;
}

.row {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
}

/* .row div {
	display: flex;
	place-items: center;
} */

.site-header {
	position: sticky;
	top: 0;
	z-index: 2;
	padding-block: 0.5rem;
}

.header-flex {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
}

.graph-image {
	/* background: rgb(32, 31, 36); */
	border: 1rem solid rgb(32, 31, 36);
	border-radius: 3rem;
}

.list-benefits > li {
	line-height: 2;
}

.list-benefits {
	margin-bottom: 1rem;
}

body,
html {
	scroll-behavior: smooth;
	margin: 0;
	background-color: var(--shade-dk);
	font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
		Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
}

.grid-why {
	display: grid;
	grid-template-columns: 1fr min(480px, 100%);
}

.grid-benefits {
	display: grid;
	grid-template-columns: 1fr min(650px, 100%);
}

.grid-installation {
	display: grid;
	grid-template-columns: 1fr min(640px, 100%);
}
.now-accepting {
	position: relative;
	display: inline-block;
}
.now-accepting:after {
	content: "Now Accepting Anchor and Equipment Orders";
	position: absolute;
	bottom: 2.5rem;
	left: 2rem;
	right: 2rem;
	font-size: 1.875rem;
	text-align: center;
	border-radius: 1.25rem;
	text-align: center;
	padding: 1rem 4rem;
	background-color: var(--shade-dk);
	color: var(--shade-lt);
	font-weight: bold;
}

.background-graphic {
	position: fixed;
	top: 190px;
	right: -330px;
	z-index: 1;
	width: 100vw;
	height: 100vh;
	background: url("./assets/logo-background.svg") no-repeat center center;
	background-size: contain;
	/* border: 1px solid red; */
}

div,
ul,
li,
a,
p,
input,
select,
img,
video {
	box-sizing: border-box;
}

hr {
	border: none;
	border-top: 2px solid currentColor;
	width: 300vw;
	transform: translateX(-244vw);
}

.container {
	padding-inline: 2rem;
	width: min(100%, var(--content-width));
	margin-inline: auto;
}

.shade-lt-bg {
	background-color: var(--shade-lt);
}

.shade-lt {
	color: var(--shade-lt);
}

.shade-md-bg {
	background-color: var(--shade-md);
}

.shade-md {
	color: var(--shade-md);
}

.shade-dk-bg {
	background-color: var(--shade-dk);
}

.shade-dk {
	color: var(--shade-dk);
}

.site-section {
	padding-block: 5rem;
	z-index: 1;
	position: relative;
}

.site-section__content {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
}

.site-section__content:first-child ul,
.site-section__content:first-child p {
	margin-top: 0;
	padding-top: 0;
	/* border: 1px solid red; */
}

.bold {
	font-weight: bold;
}

.font-md {
	font-size: 1.875rem; /*30px*/
}

.h2--small {
	font-size: 2.5rem; /*50px*/
	font-weight: bold;
}

.h2 {
	font-size: 3.125rem; /*50px*/
	font-weight: bold;
}

.h3 {
	font-size: 1.875rem;
	font-weight: normal;
	line-height: 1.5;
}

.h4 {
	font-size: 1.5rem;
}

ul {
	list-style: none;
	padding-left: 0;
}

ol {
	padding-left: 1rem;
	display: flex;
	flex-direction: column;
	gap: 1rem;
	list-style: none;
}

ol li {
	padding-left: 1rem;
	position: relative;
	padding-left: 2rem;
}

ol li:before {
	color: rgb(152, 148, 143);
	content: counter(li);
	position: absolute;
	left: -1.5rem;
	font-weight: bold;
	font-size: 1.5rem;
}

ol li:first-child:before {
	content: "01.";
}

ol li:nth-child(2):before {
	content: "02.";
}
ol li:nth-child(2):before {
	content: "02.";
}
ol li:nth-child(3):before {
	content: "03.";
}
ol li:nth-child(4):before {
	content: "04.";
}
ol li:nth-child(5):before {
	content: "05.";
}
ol li:nth-child(6):before {
	content: "06.";
}
ol li:nth-child(7):before {
	content: "07.";
}
ol li:nth-child(8):before {
	content: "08.";
}
ol li:nth-child(9):before {
	content: "09.";
}
ol li:nth-child(10):before {
	content: "10.";
}

.site-section__headline {
	margin-bottom: 2rem;
}

.site-section__subhead {
	width: min(720px, 100%);
}

.site-section__content ul > li::before {
	content: "–";
	margin-right: 1rem;
}

.round-frame {
	border: 1.2rem solid currentColor;
	border-radius: 1rem;
	/* overflow: hidden; */
}

.grid-main {
	display: grid;
	grid-template-columns: 5fr 7fr;
}

img,
video {
	max-width: 100%;
}

.half-width {
	width: 50%;
}

.centered-content {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.button {
	font-size: 1.875rem;
	letter-spacing: 1px;
	padding: 1rem 4.325rem;
	text-transform: uppercase;
	font-weight: bold;
	appearance: none;
	border: none;
	border-radius: 8rem;
	cursor: pointer;
	letter-spacing: -1px;
	text-decoration: none;
}

.button--icon {
	appearance: none;
	border: none;
	background: none;
	padding: 0;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
}

.gap-md {
	gap: 1.5rem;
}
.gap-lg {
	gap: 2.5rem;
}
.gap-xl {
	gap: 3.5rem;
}

.show-xs {
	display: none;
}

.font-sm {
	font-size: 1.5625rem; /* 25px */
}

p,
li {
	font-size: 1.875rem;
}

ul li {
	line-height: 1.7;
}

a {
	color: currentColor;
}

.first-section {
	padding-top: 5.125rem;
}

.site-footer {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	position: relative;
	z-index: 2;
	padding-block: 1rem;
	background: rgba(232, 225, 214, 0.2);
}

.site-header__menu {
	display: flex;
	flex-direction: row;
	width: min(760px, 100%);
	/* gap: 2rem; */
	justify-content: space-between;
}

.site-footer__menu {
	display: flex;
	flex-direction: row;
	justify-content: space-evenly;
	align-items: center;
	text-decoration: none;
	width: min(760px, 100%);
}

.site-footer__menu a,
.site-header__menu a {
	text-decoration: none;
	font-size: 20px;
}

.show-mobile {
	display: none;
}

.mobile-menu-icon {
	width: 36px;
	height: 36px;
	display: flex;
}

.mobile-button-close {
	position: absolute;
	top: 2rem;
	right: 2rem;
	width: 36px;
	height: 36px;
}

@media (max-width: var(--content-width)) {
}

@media (max-width: 1000px) {
	.grid-main,
	.grid-why,
	.grid-benefits,
	.grid-installation {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 768px) {
	.now-accepting:after {
		font-size: 1rem;
		padding: 1rem;
	}

	.mobile-stack {
		display: flex;
		flex-direction: column;
	}

	.half-width {
		width: 100%;
	}

	.show-mobile {
		display: unset;
	}

	.site-header__menu {
		flex-direction: column;
		justify-content: space-evenly;
		align-items: center;

		gap: 1rem;
		position: fixed;
		top: -1rem;
		left: 0;
		width: 100%;
		min-height: 100vh;
		z-index: 3;
		background-color: #232323;
		padding: 1rem;
		transform: translateX(100%);
		transition: transform 0.3s cubic-bezier(0.11, 1.09, 1, 0.99);
	}

	.site-header__menu.active {
		transform: translateX(0);
	}

	.site-header__menu a {
		font-size: 2rem;
		font-weight: bold;
	}

	.site-footer__menu {
		flex-direction: column;
		gap: 1rem;
	}

	/* .header-flex {
		flex-direction: column;
		align-items: center;
	} */
}

@media (max-width: 480px) {
	.show-xs {
		display: unset;
	}

	.button {
		font-size: 1.25rem;
		padding: 0.5rem 2rem;
	}
}