/* #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(--green500);
	text-underline-offset: 4px;

	&:hover {
		color: var(--yellow500);
	}
}

body {
	background-color: white;
	color: var(--black);
	font-family: var(--font-sans);
	font-size: var(--fz18);
}

button {
	background: none;
	border: none;
	cursor: pointer;
}

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

hr {
	border: 0;
	border-top: var(--divider-line);
	clear: both;
	margin-block: 3rem;
}

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

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

img {
	display: block;
	max-width: 100%;
}

li {
	font-size: var(--fz18);
	margin-left: 1em;
	padding-top: .5em;
	text-wrap: pretty;
}

p {
	line-height: 1.7;
	margin-bottom: 1lh;
	text-wrap: pretty;
}

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

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

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

.cta {
	background: url("data:image/svg+xml,<svg id='patternId' width='100%' height='100%' xmlns='http://www.w3.org/2000/svg'><defs><pattern id='a' patternUnits='userSpaceOnUse' width='20' height='20' patternTransform='scale(2) rotate(0)'><rect x='0' y='0' width='100%' height='100%' fill='hsla(173, 70%, 30%, 1)'/><path d='M3.25 10h13.5M10 3.25v13.5'  stroke-linecap='square' stroke-width='1' stroke='hsla(0, 0%, 100%, 0.05)' fill='none'/></pattern></defs><rect width='800%' height='800%' transform='translate(0,0)' fill='url(%23a)'/></svg>");
	color: var(--green100);
	padding-block: 5rem;
	text-align: center;

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

	p {
		font-size: var(--fz20);
		margin-inline: auto;
		max-width: 60ch;
	}
}

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

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

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

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

	a {
		color: var(--green700);
		font-size: var(--fz18);
		font-weight: 600;
		line-height: 1;
		text-decoration: none;
		transition: var(--transition);

		@media (width < 1200px) {
			color: white;
			font-size: var(--fz24);
			translate: 0 3rem;
		}

		&:hover,
		&[aria-current="page"] {
			color: var(--yellow500);
			text-decoration: underline;
			text-decoration-thickness: 2px;
		}
	}
}

.nav-toggle {
	display: none;
	z-index: 10;

	@media (width < 1200px) {
		color: var(--green700);
		cursor: pointer;
		display: block;
		font-size: var(--fz24);
		position: relative;
		text-decoration: none;
	}
}

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

	.nav-grid {
		opacity: 1;
		visibility: visible;

		a {
			translate: 0;
		}
	}

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

/* #endregion */
/* #region Header */
.header {
	background-color: white;
	padding-block: 1rem;
	position: fixed;
	top: 0;
	width: 100%;
	z-index: 10;

	&.scrolled {
		box-shadow: 2px 2px 8px var(--black-30);
	}
}

.header-grid {
	align-items: center;
	display: grid;
	gap: 1rem;
	grid-template-columns: auto 1fr;

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

			@media (width < 900px) {
				width: 150px;
			}
		}

		&.scrolled img {
			width: 180px;
		}
	}
}

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

	a {
		color: var(--green300);
		text-decoration: none;
		width: max-content;

		&:hover {
			color: var(--yellow500);
			text-decoration: underline;
		}
	}
}

.footer-grid {
	display: grid;
	gap: 3vh 3vw;
	grid-template-columns: repeat(3, auto);

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

.footer-links {
	a {
		display: block;
		margin-bottom: .8rem;

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

.footer-logos {
	align-content: start;
	display: grid;
	grid-auto-flow: row;
	justify-items: center;
	row-gap: 1rem;

	a:nth-child(2) img {
		width: 120px;
	}

	a:nth-child(3) img {
		width: 100px;
	}

	img {
		margin-inline: auto;
		width: 200px;
	}
}

/* #endregion */
/* #region Hero */
.hero {
	background: linear-gradient(var(--black-30), var(--black-30)), url("https://ripcord.sirv.com/Alpine/shutterstock_713254015.jpg?ch=1450") center/cover no-repeat, black;
	font-smooth: never;
	min-height: 95vh;

	h1 {
		color: white;
		font-size: var(--fz60);
		font-weight: 600;
		margin-bottom: .2em;
		max-width: 20ch;
		padding-top: 18vh;

		@media (width < 900px) {
			font-size: var(--fz48);
		}
	}

	h2 {
		color: white;
		font-size: var(--fz20);
		font-weight: 400;
		line-height: 1.4;
		margin-top: .8em;
		max-width: 37ch;
	}

	.btn {
		margin-top: 2rem;
	}
}

/* #endregion */
/* #region Home-About */
.home-about {
	background-color: var(--green100);
	padding-block: var(--default-padding-block);

	h2 {
		font-size: var(--fz36);
		font-weight: 600;
		letter-spacing: -1px;
		margin-bottom: 2rem;
	}
}

.home-about-grid {
	display: grid;
	gap: 3rem;
	grid-template-columns: 300px auto;

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

	img {
		border-radius: var(--radius);

		@media (width < 900px) {
			display: none;
		}
	}

	p {
		max-width: 60ch;
	}
}

/* #endregion */
/* #region Home-Services */
.home-services {
	padding-bottom: var(--default-padding-block);
}

.home-services-boxes-grid {
	display: grid;
	gap: 3vh 1vw;
	grid-template-columns: repeat(3, 1fr);
	margin-bottom: 2rem;
	translate: 0 -2rem;

	@media (width < 1000px) {
		grid-template-columns: min(100%, 600px);
		justify-content: center;
	}

	a {
		--home-services-boxes-radius: .5rem;
		background-color: var(--green700);
		border-radius: var(--home-services-boxes-radius);
		display: grid;
		grid-template-rows: 1fr auto;
		text-decoration: none;
		transition: var(--transition);

		&:hover {
			img {
				scale: 1.1;
			}

			.home-services-boxes-text {
				background-color: var(--green500);
				border-color: var(--yellow500);
			}
		}
	}

	h2 {
		color: white;
		font-size: var(--fz24);
		font-weight: 600;
		margin-bottom: .5rem;
	}
}

.home-services-boxes-img {
	border-bottom-left-radius: var(--home-services-boxes-radius);
	border-bottom-right-radius: var(--home-services-boxes-radius);
	overflow: hidden;

	img {
		object-fit: cover;
		transition: var(--transition);
	}
}

.home-services-boxes-text {
	background: var(--green700);
	border-bottom: 4px solid transparent;
	border-top-left-radius: var(--home-services-boxes-radius);
	border-top-right-radius: var(--home-services-boxes-radius);
	padding: 1.5rem 2rem 1rem;
	transition: var(--transition);

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

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

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

	a {
		text-decoration: none;

		&:has(img) {
			@media (width < 800px) {
				display: none;
			}
		}
	}

	h2 {
		font-size: var(--fz24);
		margin-block: 3rem .5rem;

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

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

.home-services-grid-authorized {
	background-color: var(--green700);
	color: white;
	display: block;
	font-size: var(--fz12);
	font-weight: 600;
	letter-spacing: 1px;
	margin-inline: auto;
	padding: .5rem 1rem;
	text-transform: uppercase;
	translate: 0 -2rem;
	width: max-content;
}

/* #endregion */
/* #region Home-Testimonials */
.home-testimonials {
	background: linear-gradient(to right, white, var(--white-80)), url("https://ripcord.sirv.com/Alpine/truck.jpg") center/cover no-repeat;
	padding-block: var(--default-padding-block);

	a:last-of-type {
		display: block;
		font-weight: 600;
		margin: 2rem auto 0;
		width: fit-content;
	}

	div {
		margin-bottom: .5rem;
	}

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

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

.home-testimonials-grid {
	display: grid;
	gap: 2rem;
	grid-template-columns: repeat(3, 1fr);
	margin-top: 2rem;

	@media (width < 1300px) {
		grid-template-columns: 1fr 1fr;
	}

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

	i {
		color: var(--yellow500);
	}
}

/* #endregion */
/* #region Sub */
.sub {
	padding-block: 4rem 5rem;

	h2 {
		font-size: var(--fz32);
		margin-block: 1.5em 1em;

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

.sub-faqs {
	border-top: var(--divider-line);
	margin-top: 2rem;
	padding-top: 2rem;

	h2 {
		margin-bottom: 2rem;
	}

	h3 {
		font-size: var(--fz20);
		font-weight: 600;
		margin-block: 3rem .6rem;
	}

	p {
		font-size: var(--fz16);
		max-width: 70ch;
	}
}

.sub-sidepic-grid {
	display: grid;
	gap: 0 3vw;
	grid-template-columns: auto auto;
	justify-content: start;
	margin-block: 1rem 4rem;

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

	h2 {
		grid-column: 1/-1;
	}

	img {
		border-radius: var(--radius);
		width: 400px;

		@media (width < 900px) {
			grid-row: 2;
			margin-bottom: 1lh;
		}
	}

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

.sub-sidepic-link {
	display: block;
	font-weight: 600;
	margin-top: 1rem;
	width: max-content;
}

.subhero {
	background: linear-gradient(var(--black-70), var(--black-30)), var(--subhero-page-bg) center/cover no-repeat;
	background-color: black;
	color: white;
	font-weight: 600;
	padding-block: 20vh;
	text-align: center;

	h1 {
		font-size: var(--fz48);
		font-weight: 600;

		span {
			font-weight: 200;
		}
	}
}

.subhero-about {
	--subhero-page-bg: url("https://ripcord.sirv.com/Alpine/shutterstock_1432047599.jpg?ch=1300");
}

.subhero-contact {
	--subhero-page-bg: url("https://ripcord.sirv.com/Alpine/truck.jpg?ch=600");
}

.subhero-ecobee {
	--subhero-page-bg: url("https://ripcord.sirv.com/Alpine/ecobee-banner.jpg?ch=1800");
}

.subhero-ev-charger {
	--subhero-page-bg: url("https://ripcord.sirv.com/Alpine/ev-charger-banner.jpg");
}

.subhero-generators {
	--subhero-page-bg: url("https://ripcord.sirv.com/Alpine/generator-installation-2.jpg?cy=600");
}

.subhero-services {
	--subhero-page-bg: url("https://ripcord.sirv.com/Alpine/shutterstock_1920003875.jpg?ch=1400");
}

/* #endregion */
/* #region Sub-Contact */
.sub-contact-grid {
	display: grid;
	gap: 3rem 5vw;
	grid-template-columns: auto 1fr;
	justify-content: start;

	@media (width < 700px) {
		grid-template-columns: 1fr;
	}
}

/* #endregion */
/* #region Sub-Ecobee */
.sub-ecobee-grid {
	background-color: var(--green100);
	border: 1px solid var(--green300);
	border-radius: .8rem;
	display: grid;
	gap: 8rem 5vw;
	grid-template-columns: repeat(3, 1fr);
	justify-content: start;
	margin-block: 3rem 2rem;
	padding: 4rem 5rem;

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

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

	a {
		background-color: var(--green500);
		border-radius: var(--radius);
		color: white;
		display: block;
		font-size: var(--fz14);
		font-weight: 500;
		letter-spacing: 1px;
		margin-inline: auto;
		padding: .7rem 1.2rem;
		text-align: center;
		text-decoration: none;
		text-transform: uppercase;
		transition: var(--transition);
		width: max-content;

		@media (width < 400px) {
			width: auto;
		}

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

	h3 {
		font-size: var(--fz24);
		text-align: center;
	}

	h3 + p {
		line-height: 1.4;
		margin: .4em auto 0;
		max-width: 20ch;
	}

	img {
		margin: 0 auto 1rem;
		width: 400px;
	}

	& + img {
		@media (width < 800px) {
			display: none;
		}
	}

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

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

		&:first-of-type {
			font-weight: 600;
			margin-bottom: .7lh;
			text-align: center;
		}
	}

	ul {
		margin-bottom: 2rem;
	}
}

/* #endregion */
/* #region Sub-Generators */
.apply {
	display: block;
	margin-bottom: 2rem;
	max-width: fit-content;

	img {
		width: 200px;
	}
}

/* #endregion */