@import url("https://use.typekit.net/hzt8lyf.css");

/* #region @keyframes */
@keyframes fade-in {
	to {
		opacity: 1;
	}
}

@keyframes new-fade-in {
	to {
		opacity: 1;
		scale: 1;
	}
}

@keyframes slide-up {
	from {
		translate: 0 var(--hero-headline-translateY);
	}

	to {
		translate: 0;
	}
}

/* #endregion */
/* #region :root */
:root {
	/* Colors - Aqua */
	--aqua050: hsl(168 90% 95%);
	--aqua100: hsl(168 90% 89%);
	--aqua200: hsl(168 90% 78%);
	--aqua300: hsl(168 90% 62%);
	--aqua400: hsl(168 90% 46%);
	--aqua500: hsl(168 90% 34%);
	--aqua600: hsl(168 90% 30%);
	--aqua700: hsl(168 90% 21%);
	--aqua800: hsl(168 90% 17%);
	--aqua900: hsl(168 90% 14%);
	--aqua950: hsl(168 90% 8%);
	/* Colors - Blue */
	--blue050: hsl(210 55% 97%);
	--blue100: hsl(210 55% 94%);
	--blue200: hsl(210 55% 86%);
	--blue300: hsl(210 55% 74%);
	--blue400: hsl(210 55% 60%);
	--blue500: hsl(210 55% 48%);
	--blue600: hsl(210 55% 39%);
	--blue700: hsl(210 55% 32%);
	--blue700-30: hsl(210 55% 32% / .3);
	--blue700-90: hsl(210 55% 32% / .9);
	--blue800: hsl(210 55% 29%);
	--blue900: hsl(210 55% 24%);
	--blue900-30: hsl(210 55% 24% / .3);
	--blue900-50: hsl(210 55% 24% / .5);
	--blue900-70: hsl(210 55% 24% / .7);
	--blue900-90: hsl(210 55% 24% / .9);
	--blue950: hsl(210 55% 16%);
	--blue950-70: hsl(210 55% 16% / .7);
	/* Colors - Steel */
	--steel050: hsl(216 33% 97%);
	--steel100: hsl(217 25% 94%);
	--steel200: hsl(221 27% 86%);
	--steel300: hsl(216 26% 74%);
	--steel400: hsl(216 25% 60%);
	--steel500: hsl(216 24% 48%);
	--steel600: hsl(218 27% 44%);
	--steel700: hsl(220 27% 32%);
	--steel800: hsl(219 24% 27%);
	--steel900: hsl(219 21% 24%);
	--steel950: hsl(222 21% 16%);
	/* Colors - White */
	--white-90: hsl(0 0% 100% / .9);
	/* Fonts */
	--font-sans: "proxima-nova", 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 */
	--home-guide-testimonials-grad: linear-gradient(to bottom, var(--aqua300), var(--blue500));
	--home-portfolio-grad: linear-gradient(to bottom right, var(--blue100), white);
	--home-problem-grad: linear-gradient(to bottom, var(--white-90), var(--white-90));
	--home-process-grad: linear-gradient(to right, var(--white-90) 30%, var(--aqua100));
	--home-testimonials-grid-grad: linear-gradient(to right, var(--steel300) 50%, var(--steel500));
	--sub-proposal-grad: linear-gradient(to bottom, var(--blue700-90), var(--blue700-90));
	/* Images */
	--home-problem-img: url("https://ripcord.sirv.com/Ripcord/wave.svg");
	/* Utilities */
	--radius: .4rem;
	--transition: all .3s;
}

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

a {
	color: var(--aqua600);
	text-decoration: underline;
	text-decoration-color: transparent;
	text-decoration-thickness: 2px;
	text-underline-offset: .12em;
	transition: var(--transition);

	&:hover {
		color: var(--aqua500);
		text-decoration-color: currentColor;
	}
}

body {
	background-color: var(--blue900);
	color: var(--blue700);
	font-family: var(--font-sans);
	overflow-y: scroll;
	scroll-behavior: smooth;
}

button {
	background: none;
	border: none;
	color: var(--blue700);
	cursor: pointer;
}

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

hr {
	border: 0;
	border-top: 1px solid var(--steel300);
	margin-block: 2.5rem;
}

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

ol {
	margin-left: 2rem;
}

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

/* #endregion */
/* #region Global */
.btn {
	--padding-block: 1.2rem;
	background-color: var(--aqua700);
	border-radius: var(--radius);
	color: white !important;
	display: inline-block;
	font-size: var(--fz16);
	font-weight: 700;
	letter-spacing: 2px;
	line-height: 1;
	padding: var(--padding-block) calc(var(--padding-block) * 1.5);
	text-decoration: none !important;
	text-transform: uppercase;
	transition: var(--transition);

	&:hover {
		background-color: var(--aqua500);
		translate: 0 -2px;
	}
}

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

.cta {
	background: linear-gradient(to right, var(--aqua600), var(--blue800));
	color: white;
	padding-block: 6rem;
	text-align: center;

	h2 {
		font-size: var(--fz48);
		line-height: 1;
		margin-bottom: .4em;
	}

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

	.btn {
		background-color: var(--white-90);
		color: var(--aqua600) !important;
		margin-top: 1rem;

		&:hover {
			background-color: var(--aqua500);
			color: white !important;
		}
	}
}

/* #endregion */
/* #region Footer */
.footer {
	background: var(--blue950);
	color: var(--steel300);
	padding-block: 6rem;
	text-align: center;

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

		&:hover {
			color: white;
		}

		&[href*="privacy"] {
			display: block;
			font-size: var(--fz12);
			letter-spacing: 1px;
			margin: 2rem auto 0;
			text-transform: uppercase;
			width: max-content;
		}
	}

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

.footer-social {
	margin-block: 1rem 2rem;

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

/* #endregion */
/* #region Header */
.header {
	backdrop-filter: blur(6px);
	background-color: var(--white-90);
	box-shadow: 0 4px 12px 4px var(--blue700-30);
	padding-block: 1.2rem;
	position: fixed;
	width: 100%;
	z-index: 10;
}

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

/* #endregion */
/* #region Hero */
.hero {
	--primary-animation: fade-in 1s forwards, slide-up 1s forwards;
	--secondary-animation: fade-in 2s 1s forwards;
	color: white;
	display: grid;
	grid-template-areas: "hero-stack";
	position: relative;

	> * {
		grid-area: hero-stack;
	}

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

	h1 {
		--hero-headline-translateY: 10vh;
		animation: var(--primary-animation);
		font-size: var(--fz76);
		letter-spacing: -1px;
		line-height: 1.1;
		margin-bottom: 2rem;
		max-width: 22ch;
		opacity: 0;
		translate: 0 var(--hero-headline-translateY);

		@media (width < 1300px) {
			font-size: var(--fz60);
		}
	}

	h2 {
		--padding-block: 1rem;
		animation: var(--secondary-animation);
		background-color: var(--blue900);
		border-radius: 5rem;
		font-size: var(--fz24);
		font-weight: 600;
		line-height: 1.5;
		margin-bottom: 3rem;
		max-width: 50ch;
		opacity: 0;
		padding: var(--padding-block) calc(var(--padding-block) * 2);
		text-box-trim: trim-both;
		text-wrap: balance;
		translate: 0 var(--hero-headline-translateY);
		width: fit-content;

		@media (width < 700px) {
			border-radius: 1rem;
		}
	}

	i {
		font-size: var(--fz24);
		padding-right: 1rem;
		width: 50px;
	}

	li {
		align-items: center;
		animation: var(--secondary-animation);
		display: grid;
		grid-template-columns: auto 1fr;
		line-height: 1.2;

		+ li {
			margin-top: 1.2em;
		}
	}

	ul {
		animation: var(--secondary-animation);
		color: white;
		font-size: var(--fz24);
		list-style: none;
		margin-bottom: 4.5rem;
		opacity: 0;
	}

	.btn {
		animation: var(--secondary-animation);
		background-color: var(--aqua600);
		color: white !important;
		display: block;
		opacity: 0;
		width: max-content;

		&:hover {
			background-color: var(--aqua500);
			color: white !important;
		}
	}

	.eyebrow {
		animation: var(--secondary-animation);
		color: var(--aqua300);
		font-size: var(--fz14);
		font-weight: 400;
		letter-spacing: 3px;
		margin-bottom: 5vh;
		opacity: 0;
		text-transform: uppercase;
	}
}

.hero-content {
	padding-block: 15vh;
	z-index: 3;
}

.hero-video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 1;
}

.hero-overlay {
	background: linear-gradient(135deg, var(--blue900), var(--blue900-90), var(--blue900-70), var(--blue900-50));
	z-index: 2;
}

/* #endregion */
/* #region Home-Guide */
.home-guide {
	background: var(--blue700);
	color: white;
	padding-block: 6rem;

	h2 {
		font-size: var(--fz48);
		letter-spacing: -1px;
		margin-bottom: 5rem;
		max-width: 30ch;
	}
}

.home-guide-grid {
	display: grid;
	gap: 4rem 8vw;
	grid-template-columns: auto auto;

	h3 {
		font-size: var(--fz28);
		margin-bottom: .7rem;
	}

	i {
		font-size: var(--fz28);
		margin-bottom: 1rem;
	}

	p {
		color: var(--blue100);
		font-size: var(--fz20);
	}
}

.home-guide-testimonials-grid {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 1rem;
	justify-items: start;
	margin-top: 4rem;
	z-index: 10;

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

	div {
		position: relative;
		z-index: 30;
	}

	i {
		color: var(--steel700);
		font-size: var(--fz76);
		font-weight: 700;
		opacity: .3;
		position: absolute;
		translate: -1rem -3rem;
		z-index: -10;
	}

	img {
		aspect-ratio: 1;
		background: var(--home-guide-testimonials-grad);
		border-radius: 50%;
		width: 100px;
	}

	p {
		font-size: var(--fz18) !important;
		margin-bottom: .5rem;
		line-height: 1.4;
	}
}

.home-guide-grid-text div + div {
	margin-top: 3rem;
}

/* #endregion */
/* #region Home-Portfolio */
.home-portfolio {
	background: var(--home-portfolio-grad);
	padding-block: 6rem;

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

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

	.btn {
		display: block;
		margin: 4rem auto 0;
		width: max-content;
	}
}

.home-portfolio-grid {
	--col-min-width: 300px;
	align-items: end;
	display: grid;
	gap: 3rem min(2rem, 3vw);
	grid-template-columns: repeat(auto-fill, minmax(var(--col-min-width), 1fr));
	justify-content: center;
	justify-items: start;
	margin-top: 5rem;

	a {
		border-radius: var(--radius);
		display: block;
		overflow: clip;
		text-decoration: none;
	}

	h3 {
		font-size: var(--fz18);
		font-weight: 700;
		margin-bottom: .4em;
	}

	img {
		border-radius: .4rem;
		transition: var(--transition);
		width: 400px;

		&:hover {
			transform: scale(1.1);
		}
	}
}

/* #endregion */
/* #region Home-Problem */
.home-problem {
	background: var(--home-problem-grad), var(--home-problem-img) center/cover white;
	padding-block: 4rem 6rem;

	h2 {
		font-size: var(--fz42);
		letter-spacing: -1px;
		margin-bottom: 4rem;
	}
}

.home-problem-grid {
	display: grid;
	gap: 3rem 5vw;
	grid-template-columns: repeat(3, 1fr);

	h3 {
		font-size: var(--fz24);
		margin-bottom: .5rem;
	}

	i {
		font-size: var(--fz48);
		margin-bottom: 1.5rem;
		position: relative;
		z-index: 1;

		&::after {
			background-color: var(--blue100);
			border-radius: 50%;
			bottom: -4px;
			content: "";
			height: 100%;
			left: 8px;
			position: absolute;
			width: 100%;
			z-index: -1;
		}
	}

	p {
		font-size: var(--fz18);
		margin-bottom: 0;
		max-width: 50ch;
	}

	span {
		background-color: var(--aqua050);
		font-weight: 600;
		padding-inline: .3rem;
	}
}

/* #endregion */
/* #region Home-Process */
.home-process {
	background: var(--home-process-grad), var(--home-problem-img) center/cover white;
	padding-block: 4rem 6rem;

	h2 {
		font-size: var(--fz48);
		letter-spacing: -1px;
		margin-bottom: 1rem;
		max-width: 19ch;
	}

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

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

	h3 {
		font-size: var(--fz24);
		font-weight: 700;
		letter-spacing: 1px;
		margin-bottom: 1rem;
		text-transform: uppercase;
	}

	i {
		font-size: var(--fz48);
		font-weight: 500;
		margin-bottom: 1rem;
	}

	p {
		font-size: var(--fz18);
		text-align: left;
		text-wrap: balance;
	}
}

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

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

	&:hover {
		width: 173px;
	}

	&.scrolled {
		width: 130px;
	}
}

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

.nav-grid {
	align-items: center;
	gap: 1rem 2vw;
	display: grid;
	grid-auto-flow: column;

	a {
		border-bottom: 3px solid transparent;
		color: var(--blue700);
		display: inline-block;
		font-size: var(--fz16);
		font-weight: 700;
		letter-spacing: 1px;
		padding-bottom: .2rem;
		text-decoration: none;
		text-transform: uppercase;

		&:hover {
			border-color: var(--aqua500);
			color: var(--aqua500);
		}
	}
}

.nav-toggle {
	display: none;
}

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

	h1 {
		font-size: var(--fz32);
		font-weight: 700;
		margin-bottom: .5em;
		text-transform: uppercase;
	}

	h2 {
		font-size: var(--fz24);
		font-weight: 700;
		margin-block: 1.4em .3em;
	}

	h3 {
		font-size: var(--fz28);
		font-weight: 300;
		line-height: 1.4;
	}

	li {
		font-size: var(--fz18);
		line-height: 1.3;
		padding-left: .5em;

		+ li {
			margin: .5em 0 0;
		}
	}

	ul {
		margin: 0 0 2em 1.3em;
	}
}

/* #endregion */
/* #region Sub-About */
.sub-about-grid {
	display: grid;
	gap: 2rem 3rem;
	grid-template-columns: repeat(3, auto);
	margin-top: 4rem;
}

.sub-about-grid h2 {
	margin-top: 0;
}

.sub-about-grid i {
	font-size: var(--fz48);
	margin-bottom: .4em;
}

/* #endregion */
/* #region Sub-Contact */
.sub-contact-confirm-grid {
	--col-min-width: 300px;
	column-gap: 2rem;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(var(--col-min-width), 1fr));
	margin-top: 1rem;
}

.sub-contact-confirm-grid h3 {
	font-size: var(--fz24);
	font-weight: 700;
	line-height: 1.2em;
	margin-block: 2em .2em;
}

/* #endregion */
/* #region Sub-Features */
.sub-features-grid {
	display: grid;
	gap: 4rem 2rem;
	grid-template-columns: repeat(3, 1fr);
	margin-top: 5rem;

	h2 {
		margin-top: 0;
	}

	i {
		font-size: var(--fz28);
		margin-bottom: .5rem;
	}

	p {
		font-size: var(--fz16);
		line-height: 1.3;
		margin-bottom: 0;
	}
}

/* #endregion */
/* #region Sub-Insites */
.sub-insites-article {
	a {
		font-weight: 700;
	}

	h1 {
		font-size: var(--fz48);
		letter-spacing: -1px;
		line-height: 1.2;
		margin-bottom: 1rem;
		text-transform: none;
	}

	h2 {
		font-size: var(--fz28);
		margin-block: 2rem .3em;
	}

	h3 {
		font-size: var(--fz20);
		font-weight: 700;
		line-height: 1.2em;
		margin-block: 1.2em .2em;
	}

	hr {
		margin-block: 2.5rem;
	}

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

	ul {
		margin-left: 2.5rem;
	}

	.section {
		background: linear-gradient(to right, var(--blue050), transparent);
		border-radius: var(--radius);
		padding: .2rem 2.8rem .8rem;

		img {
			border: 2px solid var(--blue100);
			border-radius: var(--radius);
			margin-block: 1.5rem 3rem;
		}

		+ .section {
			margin-top: 2rem;
		}
	}
}

.sub-insites-article-2002 a > img {
	display: inline;
}

.sub-insites-article-2002 img {
	max-width: 800px;
	padding-block: 1rem 4rem;
}

.sub-insites-article-caption {
	font-size: var(--fz24);
	font-weight: 700;
	margin-block: 1.5em .2em;
}

.sub-insites-article-contain {
	--content-max-width: 1000px;
}

.sub-insites-article-howlong-steps-grid {
	background-color: var(--steel100);
	display: grid;
	font-size: var(--fz16);
	grid-template-columns: repeat(4, 1fr);
	gap: 1rem 3rem;
	padding: 1rem 2rem;
}

.sub-insites-article-howlong-steps-grid h3 {
	font-size: var(--fz20);
}

.sub-insites-article-howlong-steps-grid p {
	margin-bottom: 0;
}

.sub-insites-article-imagecontain {
	border: 1px solid var(--steel500);
	box-shadow: 4px 4px 6px 2px var(--steel300);
	margin-block: 2rem;
}

.sub-insites-article-mistakes > div {
	--dash-padding: 3rem;
	margin-top: var(--dash-padding);
	padding-top: var(--dash-padding);
	position: relative;
}

.sub-insites-article-mistakes > div::before {
	content: "";
	background-color: var(--steel300);
	height: 5px;
	left: 0;
	position: absolute;
	top: 0;
	width: 70px;
}

.sub-insites-article-mistakes h2 {
	font-size: var(--fz28);
	margin-block: 0 1.2rem;
}

.sub-insites-article-mistakes-fix {
	background-color: var(--steel100);
	border-radius: var(--radius);
	margin-block: 2rem 6rem;
	padding: 2rem;
}

.sub-insites-article-mistakes-fix h3 {
	font-size: var(--fz14);
	letter-spacing: 2px;
	margin-block: 0 1rem;
	text-transform: uppercase;
}

.sub-insites-article-mistakes-fix i {
	font-size: var(--fz20);
	margin-right: .3rem;
}

.sub-insites-article-mistakes-fix p {
	font-size: var(--fz16);
	font-weight: 500;
	margin-bottom: 0;
}

.sub-insites-article-mistakes-grid {
	display: grid;
	gap: 2rem 3rem;
	grid-template-columns: 1fr auto;
}

.sub-insites-article-mistakes-grid p:last-of-type {
	margin-bottom: 0;
}

.sub-insites-article-quote {
	background-color: var(--steel300);
	border-radius: .6rem;
	color: var(--blue700);
	font-size: var(--fz24);
	font-style: italic;
	font-weight: 300;
	line-height: 1.4em;
	padding: 2rem;
}

.sub-insites-article-time-grid {
	color: var(--steel700);
	display: grid;
	font-size: var(--fz12);
	gap: 2rem;
	grid-template-columns: repeat(3, auto);
	justify-content: start;
	letter-spacing: 1px;
	margin-bottom: 1rem;
	text-align: center;
	text-transform: uppercase;

	i {
		font-size: var(--fz20);
		padding-right: .2em;
	}

	span {
		margin-bottom: .1em;
	}

	span:last-child {
		color: var(--blue900);
		display: block;
		font-size: var(--fz16);
		letter-spacing: 0;
		text-transform: none;
	}
}

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

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

	a {
		border-radius: .4em;
		color: white;
		display: grid;
		grid-template-rows: 3fr 1fr;
		overflow: clip;
		text-decoration: none;
	}

	a:hover div {
		background-color: var(--aqua500);
	}

	a:hover img {
		scale: 1.1;
	}

	div {
		background-color: var(--steel700);
		color: var(--white-90);
		font-size: var(--fz24);
		line-height: 1.1;
		padding: 1rem 2rem 1.5rem;
		transition: var(--transition);
		z-index: 5;
	}

	img {
		height: 100%;
		object-fit: cover;
		overflow: clip;
		transition: var(--transition);
		width: 100%;
	}

	span {
		display: block;
		font-size: var(--fz14);
		margin-top: .5em;
		text-transform: uppercase;
	}
}

/* #endregion */
/* #region Sub-Portfolio */
.sub-portfolio-grid {
	--col-min-width: 300px;
	align-items: end;
	display: grid;
	gap: 1.5rem;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--col-min-width)), 1fr));
	justify-content: center;
	margin-top: 4rem;

	a {
		text-decoration: none;
	}

	a > div {
		border: 1px solid var(--blue100);
		border-radius: var(--radius);
		overflow: clip;
		transition: var(--transition);
	}

	a:hover > div img {
		scale: 1.1;
	}

	h2 {
		font-size: var(--fz18);
		font-weight: 700;
		margin-block: 0 .4em;
	}

	img {
		animation: new-fade-in linear forwards;
		animation-timeline: view();
		animation-range: entry 100px;
		aspect-ratio: 4/3;
		border-radius: .4rem;
		object-fit: cover;
		opacity: 0;
		scale: .8;
		transition: var(--transition);
		width: 400px;
	}

	img:hover {
		transform: scale(1.1);
	}
}

/* #endregion */
/* #region Sub-Proposal */
.sub-proposal {
	--content-max-width: 900px;
	background-color: white;
	padding-block: 1rem 5rem !important;

	h2 {
		font-size: var(--fz28);
		font-weight: 700;
		line-height: 1.5em;
		margin-bottom: 1.5rem;
	}

	h3 {
		font-size: var(--fz20);
		font-weight: 700;
		margin-bottom: 1rem;

		span {
			background-color: var(--aqua050);
			border-radius: var(--radius);
			color: var(--aqua500);
			font-size: var(--fz16);
			margin-left: .5rem;
			padding: .3rem .7rem;
		}
	}

	li {
		line-height: 1.4;
		padding-left: .3rem !important;

		+ li {
			margin-top: 1rem;
		}

		span {
			font-weight: 600;
		}
	}

	p {
		text-wrap: pretty;
	}

	ul {
		margin: 0 0 3rem 1.5rem;
	}
}

.sub-proposal-accept h1 {
	text-align: center;
	text-transform: none;
}

.sub-proposal-acceptbar {
	background-color: var(--blue700);
	padding: 1rem 1rem 2rem;
	position: fixed;
	text-align: center;
	text-wrap: balance;
	width: 100%;
	z-index: 10;
}

.sub-proposal-header {
	background: linear-gradient(to bottom, var(--blue700-90), var(--blue700-90)), url("https://ripcord.sirv.com/Ripcord/shipping.jpg") center/cover;
	color: var(--white-90);
	padding: 10rem 1rem 5rem;
	text-align: center;

	h1 {
		font-size: var(--fz36);
		line-height: 1.1;
		margin-bottom: .5em;
	}

	img {
		margin: 0 auto 2rem;
		width: 180px;
	}

	.date {
		font-size: var(--fz16);
		letter-spacing: 1px;
		text-transform: uppercase;
	}

	.name {
		font-size: var(--fz24);
		margin-bottom: .5em;
	}
}

.sub-proposal-totals {
	align-items: center;
	border-top: 2px solid var(--aqua300);
	color: var(--aqua500);
	display: grid;
	font-weight: 700;
	gap: .5rem 20vw;
	grid-template-columns: auto auto;
	justify-content: start;
	margin-bottom: 6rem;
	padding-top: .8rem;
	width: max-content;

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

	div {
		font-size: var(--fz14);
		letter-spacing: 1px;
		margin: 0;
		text-transform: uppercase;
	}

	span {
		font-size: var(--fz20);
	}
}

/* #endregion */
/* #region Sub-Services */
.sub-services-grid {
	display: grid;
	gap: 3rem 6rem;
	grid-template-columns: 1fr 1fr;
	margin-top: 4rem;
}

.sub-services-grid h2 {
	font-size: var(--fz28);
	margin-top: 0;
}

.sub-services-grid i {
	font-size: var(--fz24);
}

/* #endregion */
/* #region Sub-Tagline */
.sub-tagline {
	font-size: var(--fz28);
	font-weight: 300;
	line-height: 1.4;
}

/* #endregion */
/* #region Sub-Testimonial */
.sub-testimonial {
	background-color: var(--steel100);
	border-radius: .5rem;
	display: none;
	margin-top: 6rem;
	padding: min(2vh, 3rem) min(8vw, 5rem);
}

.sub-testimonial blockquote {
	font-size: var(--fz20);
	margin-left: 0;
}

.sub-testimonial p {
	font-size: var(--fz16);
	font-weight: 700;
	margin-bottom: 3rem;
}

/* #endregion */
/* #region Utility */
.u-back {
	display: block;
	font-weight: 700;
	margin-bottom: 1.5rem;
	text-transform: uppercase;
	width: max-content;
}

.u-callout {
	background-color: var(--aqua050);
	border-radius: var(--radius);
	font-size: var(--fz20) !important;
	font-weight: 500;
	margin-bottom: 3rem;
	padding: 2rem;
	position: relative;
}

.u-indent {
	margin-left: 1rem;
}

.u-pip {
	background-color: var(--steel300);
	height: 4px;
	margin-block: 2rem;
	width: 50px;
}

.u-text-sm {
	font-size: var(--fz14);
	margin-top: 1rem;
}

/* #endregion */
/* #region @media */
@media (max-width: 1300px) {
	.hero {
		background-attachment: scroll;
	}

	.hero-video {
		/* On smaller screens, ensure video doesn't take too much bandwidth */
		object-position: center center;
	}

	/* Nav Style and Hide */
	.nav-grid {
		--mobile-menu-width: 60vw;
		align-content: start;
		background-color: var(--blue900-90);
		grid-auto-flow: row;
		height: 100vh;
		justify-content: center;
		padding-top: 5rem;
		position: absolute;
		right: 0;
		top: 0;
		translate: var(--mobile-menu-width);
		transition: var(--transition);
		width: var(--mobile-menu-width);
	}

	.nav-grid a {
		color: white;
		font-size: var(--fz18);
	}

	.nav-toggle {
		cursor: pointer;
		display: block;
		font-size: var(--fz28);
		/* adding !important here keeps padding on .nav-open .nav-toggle as well */
		padding: .5rem !important;
	}

	/* Nav Menu Opens */
	.nav-open .nav-grid {
		translate: 0;
	}

	.nav-open .nav-toggle {
		color: white;
		display: block !important;
		position: relative;
		/* position: relative here creates stacking context */
		rotate: 270deg;
		transition: .8s;
		z-index: 10;
	}

	.nav-open .nav-toggle {
		padding: 0;
	}

	.nav-toggle:focus-visible .fa-xmark-large {
		outline: 2px solid var(--green700);
		outline-offset: 4px;
	}

	.sub-about-grid {
		grid-template-columns: auto auto;
	}

	.sub-features-grid {
		grid-template-columns: 1fr 1fr;
	}

	.sub-insites-article-howlong-steps-grid {
		grid-template-columns: auto;
		margin-left: 2rem;
	}

	.sub-insites-article-mistakes-grid {
		grid-template-columns: auto;
	}

	.sub-portfolio-grid {
		grid-template-columns: auto auto;
	}

	.sub-services-grid {
		grid-template-columns: auto;
	}
}

@media (max-width: 900px) {
	.hero {
		height: auto;
	}

	.cta h2,
	.home-guide h2,
	.home-portfolio h2,
	.home-problem h2,
	.home-process h2 {
		font-size: var(--fz28);
	}

	.home-guide h3 {
		font-size: var(--fz24);
	}

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

	.cta p,
	.home-portfolio p {
		font-size: var(--fz18);
	}

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

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

@media (max-width: 700px) {
	.home-guide-testimonials-grid img {
		width: 75px;
	}

	.sub-about-grid {
		grid-template-columns: auto;
	}

	.sub-features-grid {
		grid-template-columns: auto;
	}

	.sub-insites-grid {
		grid-template-columns: auto;
	}

	.sub-portfolio-grid {
		grid-template-columns: auto;
	}

	.sub-proposal h3 span {
		display: block;
		margin: .3rem 0 0;
		width: max-content;
	}
}

@media (max-width: 500px) {
	.hero i {
		translate: 0 4px
	}

	.hero li {
		align-items: start;
	}

	/* On very small screens, consider using poster image instead of video for performance */
	.hero-video {
		display: none;
	}

	.hero-overlay {
		background: linear-gradient(120deg, var(--blue900-90) 40%, var(--blue900-30)), url("https://ripcord.sirv.com/Ripcord/poster-desk.jpg");
		background-size: cover;
		background-position: center;
	}

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

	.home-guide-testimonials-grid {
		grid-template-columns: auto;
	}

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

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

	.nav-grid {
		--mobile-menu-width: 100vw;
	}

	.sub {
		padding-top: 8rem;
	}
}

@media print {
	.footer {
		display: none;
	}

	.header {
		display: none;
	}

	.sub {
		padding-top: 0;
	}
}

/* #endregion */