/* #region @keyframes */
@keyframes fadeIn {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

@keyframes logoSlider {
	to {
		left: calc(var(--logo-width) * -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;
	}

	/* For hero background video */
	video[autoplay] {
		display: none !important;
	}

	.hero {
		background: linear-gradient(to bottom, var(--sky950-40) 30%, transparent), url("https://ripcord.sirv.com/Sarkisian/poster-hero.jpg") center/cover no-repeat !important;
	}

	.home-logos {
		display: none;
	}
}

/* #endregion */
/* #region Elements */
@view-transition {
	navigation: auto;
}

*, *::before, *::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

a {
	color: var(--wine500);
	text-decoration: none;

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

body {
	background-color: var(--blue900);
	color: var(--blue600);
	font-family: var(--font-sans);
}

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

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

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

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

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

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

ol, ul {
	padding-left: 1.5em;
}

ul {
	list-style: none;
	margin-left: -1rem;
}

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

	&:last-child {
		margin-bottom: 0;
	}
}

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

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

.cta {
	background: var(--wine500);
	color: var(--wine100);
	text-align: center;

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

	p {
		font-size: var(--fz18);
		margin: 0 auto 2rem;
		max-width: 60ch;
	}

	.btn {
		background-color: var(--wine100);
		color: var(--wine600) !important;
		font-size: var(--fz14);
		font-weight: 700;
		padding: 1rem 2rem;

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

	.content {
		background: url("https://ripcord.sirv.com/Sarkisian/icon-white.png?opacity=5") left center / 400px no-repeat;
		padding-block: 6rem;
	}
}

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

.formbox {
	margin-left: 2rem;
}

.sidepic {
	clear: both;
	float: right;
	margin: 0 0 2rem 2rem;

	@media (width < 600px) {
		float: none;
		margin: 1rem 0;
	}
}

.skip {
	--btn-offset: 1rem;
	background-color: var(--blue500);
	color: white;
	left: var(--btn-offset);
	padding: .5rem 1rem;
	position: absolute;
	transition: var(--transition);
	translate: 0 calc(-100% - var(--btn-offset));
	z-index: 10;

	&:focus {
		translate: 0 var(--btn-offset);
	}
}

.fslightbox-toolbar-button:not(:first-child):not(:last-child) {
	display: none;
}

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

.nav-grid {
	display: grid;
	gap: .5rem 0;
	grid-auto-flow: column;
	justify-self: end;

	@media (width < 1400px) {
		align-content: start;
		background-color: var(--blue700-90);
		backdrop-filter: blur(8px);
		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 {
		border-radius: var(--radius);
		color: var(--blue500);
		font-weight: 600;
		letter-spacing: 1px;
		padding: .8em 1em;
		text-align: center;
		text-transform: uppercase;
		transition: var(--transition);

		@media (width < 1600px) {
			font-size: var(--fz14);
		}

		@media (width < 1400px) {
			color: var(--blue100);
			font-size: var(--fz18);
			translate: 0 3rem;
		}

		@media (width < 500px) {
			font-size: var(--fz14);
		}

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

		&:last-of-type {
			background-color: var(--wine500);
			color: white;
			margin-left: 1rem;

			@media (width < 1400px) {
				margin-left: 0;
			}

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

.nav-toggle {
	display: none;

	@media (width < 1400px) {
		color: var(--wine500);
		cursor: pointer;
		display: block;
		font-size: var(--fz24);
		position: relative;
		text-decoration: none;
		z-index: 20;
	}
}

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

	.nav-grid {
		opacity: 1;
		visibility: visible;
		z-index: 10;

		a {
			translate: 0;
		}
	}

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

/* #endregion */
/* #region Header */
.header {
	--content-max-width: 1600px;
	position: fixed;
	top: 0;
	width: 100%;
	z-index: 20;
}

.header-annex {
	--text-color: var(--blue500);
	background-color: var(--blue100);
	color: var(--text-color);
	padding-block: 1rem;
	text-align: end;

	a {
		color: var(--text-color);

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

	i {
		color: var(--blue400);
		padding-right: .5em;
	}

	span {
		@media (width < 500px) {
			display: block;
			font-size: var(--fz14);
			text-align: center;
		}

		+ span {
			margin-left: 1.5rem;

			@media (width < 500px) {
				margin: .5rem 0 0;
			}
		}
	}
}

.header-main {
	background-color: var(--blue050);
	padding-block: 1.5rem;
	transition: var(--transition);

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

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

			@media (width < 1600px) {
				width: 240px;
			}

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

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

	&.scrolled {
		padding-block: 1rem;
	}
}

/* #endregion */
/* #region Footer */
.footer {
	background-color: var(--blue900);
	color: var(--blue100);
	padding-block: 4rem 6rem;

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

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

	.grid {
		display: grid;
		grid-template-columns: repeat(3, auto);
		margin-bottom: 3rem;

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

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

		.address a {
			display: block;
			width: max-content;

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

		.links {
			@media (width < 500px) {
				margin-block: 2rem;
			}

			a {
				display: block;
				margin-bottom: .7em;
				width: max-content;

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

		.social a {
			font-size: var(--fz24);
			margin-right: .5em;
		}
	}

	.annex {
		color: var(--blue500);

		@media (width < 500px) {
			text-align: center;
		}

		a {
			font-size: 10px;
			letter-spacing: 2px;
			text-transform: uppercase;
		}
	}
}

/* #endregion */
/* #region Hero */
.hero {
	--hero-text-animation: fadeIn 1s ease-in both;
	background: linear-gradient(to bottom, var(--sky950-40) 30%, transparent);
	color: white;
	padding-block: 30vh 50vh;
	text-align: center;

	h1 {
		animation: var(--hero-text-animation);
		font-size: var(--fz60);
		font-weight: 700;
		line-height: 1.2;
		margin-bottom: 1rem;
	}

	p {
		animation: var(--hero-text-animation);
		animation-delay: .5s;
		font-size: var(--fz24);
		font-weight: 500;
		line-height: 1.4;
		margin: 0 auto 3rem;
		max-width: 45ch;
	}

	.btn {
		animation: var(--hero-text-animation);
		animation-delay: 1.5s;
	}

	.video {
		height: auto;
		left: 50%;
		min-height: 100%;
		min-width: 100%;
		position: fixed;
		top: 50%;
		translate: -50% -50%;
		width: auto;
		z-index: -10;
	}
}

/* #endregion */
/* #region Home-Logos */
.home-logos {
	background-color: white;
	color: var(--blue500);
	padding-block: 6rem;
	text-align: center;

	h2 {
		font-size: var(--fz20);
		font-weight: 500;
		margin-bottom: 4rem;
	}
}

.home-logos-slider {
	--logo-count: 18;
	--logo-height: 50px;
	--logo-width: 200px;
	--animation-duration: 40s;
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: var(--logo-width);
	height: var(--logo-height);
	position: relative;
	overflow-x: hidden;
	mask-image: linear-gradient(to right,
			hsl(0 0% 0% / 0),
			hsl(0 0% 0% / 1) 20%,
			hsl(0 0% 0% / 1) 80%,
			hsl(0 0% 0% / 0));

	a {
		--logo-offset: max(calc(var(--logo-width) * var(--logo-count)), calc(100% + var(--logo-width)));
		--home-logos-slider-delay: calc(var(--animation-duration) / var(--logo-count) * (var(--logo-count) - var(--logo-index)) * -1);
		animation: logoSlider linear var(--animation-duration) var(--home-logos-slider-delay, 0s) infinite;
		height: var(--logo-height);
		left: var(--logo-offset);
		position: absolute;
		transition: none;
		translate: -50% 0;
		width: var(--logo-width);

		&:nth-of-type(1) {
			--logo-index: 1;
		}

		&:nth-of-type(2) {
			--logo-index: 2;
		}

		&:nth-of-type(3) {
			--logo-index: 3;
		}

		&:nth-of-type(4) {
			--logo-index: 4;
		}

		&:nth-of-type(5) {
			--logo-index: 5;
		}

		&:nth-of-type(6) {
			--logo-index: 6;
		}

		&:nth-of-type(7) {
			--logo-index: 7;
		}

		&:nth-of-type(8) {
			--logo-index: 8;
		}

		&:nth-of-type(9) {
			--logo-index: 9;
		}

		&:nth-of-type(10) {
			--logo-index: 10;
		}

		&:nth-of-type(11) {
			--logo-index: 11;
		}

		&:nth-of-type(12) {
			--logo-index: 12;
		}

		&:nth-of-type(13) {
			--logo-index: 13;
		}

		&:nth-of-type(14) {
			--logo-index: 14;
		}

		&:nth-of-type(15) {
			--logo-index: 15;
		}

		&:nth-of-type(16) {
			--logo-index: 16;
		}

		&:nth-of-type(17) {
			--logo-index: 17;
		}

		&:nth-of-type(18) {
			--logo-index: 18;
		}
	}
}

/* #endregion */
/* #region Home-Proof */
.home-proof {
	background: var(--blue050);
	padding-block: 2rem;

	h2 {
		font-size: var(--fz20);
		font-weight: 500;
		margin-bottom: 4rem;
	}

	.grid {
		--col-min-width: 200px;
		align-items: center;
		display: grid;
		gap: 5vw;
		grid-template-columns: repeat(4, auto);
		justify-content: center;

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

		@media (width < 500px) {
			grid-template-columns: auto;
			justify-items: center;
		}

		> a {
			align-items: center;
			color: var(--blue500);
			display: flex;
		}

		i {
			font-size: var(--fz20);

			&:first-of-type {
				font-size: var(--fz32);
				margin-right: .2em;
			}
		}

		img {
			width: var(--col-min-width);

			@media (width < 900px) {
				width: var(--col-min-width);
			}
		}
	}
}

/* #endregion */
/* #region Home-Services */
.home-services {
	background: linear-gradient(white 70%, var(--blue050));
	padding-block: 5rem;

	h2 {
		font-size: var(--fz32);
		font-weight: 700;
		letter-spacing: -1px;
		line-height: 1.5;
		margin-bottom: 1rem;

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

	.grid {
		--img-border-radius: var(--radius);
		--text-indent: var(--img-border-radius);
		display: grid;
		gap: 3rem 1rem;
		grid-template-columns: repeat(3, 1fr);
		justify-content: center;
		margin-top: 3rem;

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

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

		a {
			border-radius: var(--img-border-radius);
			display: block;
			overflow: hidden;

			&:hover {
				~ h3 {
					color: var(--wine400);
				}

				~ p {
					color: var(--wine400);
				}
			}
		}

		h3 {
			font-size: var(--fz20);
			font-weight: 600;
			margin-block: 1.2rem .4rem;
			margin-left: var(--text-indent);
			transition: var(--transition);
		}

		img {
			height: 300px;
			object-fit: cover;
			opacity: .8;
			transition: var(--transition);
			width: var(--col-min-width);

			@media (width < 900px) {
				width: var(--col-min-width);
			}

			&:hover {
				opacity: 1;
				scale: 1.07;
			}
		}

		p {
			font-size: var(--fz14);
			font-weight: 500;
			line-height: 1.5;
			margin-left: var(--text-indent);
			transition: var(--transition);
		}
	}
}

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

	a {
		text-decoration: underline;
		text-underline-offset: 2px;

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

	h1 {
		font-size: var(--fz36);
		font-weight: 600;
		letter-spacing: -1px;
		margin-bottom: 1em;
	}

	h2 {
		font-weight: 600;
		letter-spacing: -.5px;
		margin-block: 2em .3em;
	}

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

	li {
		line-height: 1.4;
		margin-bottom: .7lh;
		max-width: 70ch;
	}

	p {
		max-width: 75ch;
		position: relative;
		z-index: 10;
	}
}

.sub-estimate-grid {
	align-items: start;
	display: grid;
	gap: 2rem;
	grid-template-columns: 2fr 1fr;

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

.sub-gallery {
	--col-min-width: 270px;
	display: grid;
	gap: 2rem;
	grid-template-columns: repeat(4, auto);
	justify-content: start;
	margin-block: 3rem;

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

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

	a {
		border-radius: var(--radius);
		overflow: hidden;
	}

	img {
		height: 300px;
		object-fit: cover;
		opacity: .8;
		transition: var(--transition);
		width: var(--col-min-width);

		@media (width < 900px) {
			width: var(--col-min-width);
		}

		&:hover {
			opacity: 1;
			scale: 1.07;
		}
	}
}

.sub-services-grid {
	column-count: 2;

	@media (width < 500px) {
		column-count: 1;
	}
}

.sub-testimonial {
	color: var(--grey700);
	float: right;
	font-size: var(--fz20);
	line-height: 1.5;
	margin: 0 0 4rem 8rem;
	position: relative;
	width: 20rem;
	z-index: 0;

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

	&::before {
		color: var(--grey300);
		content: "“";
		font-family: serif;
		font-size: var(--fz60);
		left: -30px;
		position: absolute;
		top: -20px;
	}

	&::after {
		background-color: var(--sky100);
		border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
		content: "";
		height: 160%;
		left: 0;
		position: absolute;
		rotate: -10deg;
		top: 0;
		translate: -20% -20%;
		width: 100%;
		z-index: -10;
	}
}

.sub-testimonial-citation {
	font-size: var(--fz12);
	margin-top: 1em;
	text-transform: uppercase;
}

/* #endregion */
/* #region Sub-Hero */
.sub-hero {
	background: linear-gradient(to right, var(--blue700-90), transparent), var(--bg-img) center/cover;
	padding-block: 25vh 15vh;

	@media (width < 900px) {
		text-align: center;
	}

	.content {
		color: var(--blue100);
		font-size: var(--fz24);
		font-weight: 600;
		letter-spacing: .5em;
		text-transform: uppercase;
	}

	&.about {
		--bg-img: url("https://ripcord.sirv.com/Sarkisian/iStock-692601408.jpg");
	}

	&.bathroom {
		--bg-img: url("https://ripcord.sirv.com/Sarkisian/bathrooms/iStock-1151466737.jpg?cy=450");
	}

	&.estimate {
		--bg-img: url("https://ripcord.sirv.com/Sarkisian/iStock-522620712.jpg");
	}

	&.kitchen {
		--bg-img: url("https://ripcord.sirv.com/Sarkisian/kitchens/iStock-874371930.jpg");
	}

	&.renovations {
		--bg-img: url("https://ripcord.sirv.com/Sarkisian/renovations/iStock-2178753527.jpg?cy=100");
	}

	&.roofing {
		--bg-img: url("https://ripcord.sirv.com/Sarkisian/roofing/iStock-2159416425.jpg");
	}

	&.services {
		--bg-img: url("https://ripcord.sirv.com/Sarkisian/iStock-1307122988.jpg?cy=200");
	}

	&.siding {
		--bg-img: url("https://ripcord.sirv.com/Sarkisian/siding/shutterstock_1681786174.jpg");
	}

	&.windows {
		--bg-img: url("https://ripcord.sirv.com/Sarkisian/windows/iStock-875423938.jpg");
	}
}

/* #endregion */
/* #region Sub-Reviews */
.sub-reviews-flex {
	display: flex;
	flex-wrap: wrap;
	gap: 2rem;
	justify-content: center;

	a {
		justify-items: center;

		img {
			height: 50px;
		}

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

/* #endregion */
/* #region Sub-Team */
.sub-team-retired {
	color: var(--blue300);
	font-weight: 700;
	margin-top: 3rem;
	text-transform: uppercase;
}

.sub-team-grid {
	display: grid;
	gap: 1rem 3vw;
	grid-template-columns: auto auto;
	justify-content: start;

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

/* #endregion */