@font-face {
    font-family: 'Roboto';
	font-weight: 300;
	font-style: normal;
    src: url('fonts/RobotoLightsubset.eot');
    src: url('fonts/RobotoLightsubset.eot') format('embedded-opentype'),
         url('fonts/RobotoLightsubset.woff2') format('woff2'),
         url('fonts/RobotoLightsubset.woff') format('woff'),
         url('fonts/RobotoLightsubset.ttf') format('truetype'),
         url('fonts/RobotoLightsubset.svg#RobotoLightsubset') format('svg');
}

@font-face {
    font-family: 'Roboto';
	font-weight: 100;
	font-style: normal;
    src: url('fonts/RobotoThinsubset.eot');
    src: url('fonts/RobotoThinsubset.eot') format('embedded-opentype'),
         url('fonts/RobotoThinsubset.woff2') format('woff2'),
         url('fonts/RobotoThinsubset.woff') format('woff'),
         url('fonts/RobotoThinsubset.ttf') format('truetype'),
         url('fonts/RobotoThinsubset.svg#RobotoThinsubset') format('svg');
}

@font-face {
    font-family: 'Roboto';
	font-weight: 600;
	font-style: normal;
    src: url('fonts/RobotoMediumsubset.eot');
    src: url('fonts/RobotoMediumsubset.eot') format('embedded-opentype'),
         url('fonts/RobotoMediumsubset.woff2') format('woff2'),
         url('fonts/RobotoMediumsubset.woff') format('woff'),
         url('fonts/RobotoMediumsubset.ttf') format('truetype'),
         url('fonts/RobotoMediumsubset.svg#RobotoMediumsubset') format('svg');
}

@font-face {
    font-family: 'BenchNine';
	/* font-display: optional; */
    src: url('fonts/BenchNineBoldsubset.eot');
    src: url('fonts/BenchNineBoldsubset.eot') format('embedded-opentype'),
         url('fonts/BenchNineBoldsubset.woff2') format('woff2'),
         url('fonts/BenchNineBoldsubset.woff') format('woff'),
         url('fonts/BenchNineBoldsubset.ttf') format('truetype'),
         url('fonts/BenchNineBoldsubset.svg#BenchNineBoldsubset') format('svg');
}

@font-face {
    font-family: "BenchNine-fallback";
    size-adjust: 63.9%;
    ascent-override: 188%;
    src: local("Arial");
}

@font-face {
    font-family: "Roboto-fallback";
    size-adjust: 100.1%;
    ascent-override: 93%;
    src: local("Arial");
}
@font-face {
	font-family: 'Montserrat';
	src:  url('fonts/montserrat_variable_subset.woff2') format('woff2'),
		  url('fonts/montserrat_variable_subset.woff') format('woff');
}

:root {
	--font-heading: "Montserrat", sans-serif;
	--font-heading-weight: 700;
	--font-body: "Montserrat", sans-serif;
	--font-body-weight: 300;

	--font-size-heading: clamp(2rem, 4.5vw, 3rem);
	--font-size-eyebrow: clamp(1rem, 2vw, 1.25rem);
	--font-size-intro: clamp(1.5rem, 2.5vw, 2rem);

	--color-accent: #287ce1;
	--color-button-accent: #1F74DB;
	--color-brand: #013da6;
	--color-dark: #222;
	--color-light: #f2f2f2;
	--color-bg-navy: #17294d;
	--color-bg-dark: #1e1f30;

	--anim-timing: 300ms;
	--anim-easing: ease-in-out;

	--page-width: 78rem;
	--border-radius: 50%;
}

/* Box sizing rules */
*, *::before, *::after {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
}

/* Remove default margin & padding */
body, h1, h2, h3, h4, h5, h6, p, ul[class], ol[class], li, figure, figcaption, blockquote, dl, dd {
	margin: 0;
	padding: 0;
}

/* Set core body defaults */
body {
	font-family: var(--font-body);
	font-weight: var(--font-body-weight);
	font-optical-sizing: auto;
	min-height: 200vh;
	scroll-behavior: smooth;
	text-rendering: optimizeSpeed;
	line-height: 1.5;
	background-color: var(--color-bg-navy);
}

.debug {
	outline: 1px solid red;
}

.page-width {
	max-width: var(--page-width);
	padding-inline: 1.5rem;
	margin-inline: auto;
}

.display-none {
	display: none;
}

/* for screenreaders */
.visually-hidden {
	position: absolute !important;
	clip: rect(1px, 1px, 1px, 1px);
	padding: 0 !important;
	border: 0 !important;
	height: 1px !important;
	width: 1px !important;
	overflow: hidden;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-heading);
	font-weight: var(--font-heading-weight);
	text-wrap: balance;
}

blockquote, caption, figcaption, p {
	text-wrap: pretty;
}

li {
	list-style: none;
}

/* A elements that don't have a class get default styles */
a {
	text-decoration: none;
}

a:not([class]) {
	text-decoration-skip-ink: auto;
}

/* Make images easier to work with */
img {
	max-width: 100%;
	display: block;
}

/* Inherit fonts for inputs and buttons */
input, button, textarea, select {
	font: inherit;
}

/* Remove all animations and transitions for people that prefer not to see them */
@media (prefers-reduced-motion: reduce) {
	* {
		animation-duration: 0.01ms;
		animation-iteration-count: 1;
		transition-duration: 0.01ms;
		scroll-behavior: auto;
	}
}

@media (max-width: 999px) {
	.mobile-only { display: block; }
	.desktop-only { display: none; }
	[desktop-only] { display: none; }
}
@media (min-width: 1000px) {
	.mobile-only { display: none; }
	.desktop-only { display: block; }
}

.button {
	display: inline-block;
	background-color: var(--color-button-accent);
	color: white;
	border-radius: 1em;
	padding-inline: 1.5em;
	transition: all var(--anim-timing) var(--anim-easing);
	text-transform: lowercase;
    font-variant: all-small-caps;
    letter-spacing: 0.075em;
    font-weight: 500;
    line-height: 2;
    font-size: 1em;
	font-size: clamp(0.8rem, 1vw, 1rem);
}
.button:hover {
	background-color: var(--color-brand);
	cursor: pointer;
}
.button.light {
	background-color: var(--color-light);
	color: var(--color-dark);
}
.button.light:hover {
	background-color: var(--color-dark);
	color: var(--color-light);
}

.NavBar {
	position: fixed;
	z-index: 101;
	top: 0;
	left: 0;
	right: 0;
	background-color: var(--color-light);
	transition: all var(--anim-timing) ease-in-out;

	&.is-light-on-dark:before {
		content: '';
		width: 100%;
		height: 100px;
		position: absolute;
		z-index: -1;
		top: 0;
		opacity: 0.7;
		background-image: linear-gradient(to bottom,
		rgba(23, 41, 77, 1.00) 0%,
		rgba(23, 41, 77, 0.92) 9%,
		rgba(23, 41, 77, 0.738) 19%,
		rgba(23, 41, 77, 0.541) 34%,
		rgba(23, 41, 77, 0.382) 47%,
		rgba(23, 41, 77, 0.278) 56.5%,
		rgba(23, 41, 77, 0.194) 65%,
		rgba(23, 41, 77, 0.126) 73%,
		rgba(23, 41, 77, 0.075) 80.2%,
		rgba(23, 41, 77, 0.042) 86.1%,
		rgba(23, 41, 77, 0.021) 91%,
		rgba(23, 41, 77, 0.008) 95.2%,
		rgba(23, 41, 77, 0.002) 98.2%,
		transparent 100%);
	}

	&.is-light-on-dark {
		background-color: transparent;
	}

	& .container {
		height: 5rem;
		display: flex;
		justify-content: space-between;
		align-items: stretch;
	}

	& .branding {
		display: flex;
		align-items: center;
	}

	& .branding img {
		max-width: 13rem;
		height: auto;
		display: inline-block;
	}

	& .desktop-menu-list {
		display: none;
	}
	@media (min-width: 1000px) {
		& .desktop-menu-list {
			display: flex;
		}
	}

	& .desktop-menu-item a {
		padding-inline: 0.8vw;
		font-size: clamp(0.6rem, 1.3vw, 0.9rem);
		color: var(--color-dark);
		display: block;
		height: 100%;
		text-wrap: nowrap;
		display: flex;
		align-items: center;
		transition: all var(--anim-timing) var(--anim-easing);
		text-decoration: underline;
		text-decoration-color: transparent;
		text-underline-offset: 0;
		font-weight: 400;
	}
	&.is-light-on-dark .desktop-menu-item a {
		color: var(--color-light);
	}

	& .desktop-menu-item:last-child a {
		padding-right: 0;
	}

	& .desktop-menu-item a:not(:has(.button)):hover {
		color: var(--color-accent);
		text-decoration-color: var(--color-accent);
		text-underline-offset: 5px;
	}

	& .desktop-menu-item a:has(.button):hover .button {
		background-color: var(--color-brand);
	}

	&.is-light-on-dark .desktop-menu-item a:not(:has(.button)):hover {
		color: var(--color-light);
		text-decoration-color: var(--color-light);
	}

	& .hamburger {
		display: none;
		border: none;
		width: 2.5rem;
		background-color: transparent;
	}
	@media (max-width: 999px) {
		& .hamburger {
			display: flex;
			flex-direction: column;
            justify-content: center;
		}
	}

	& .burger-line {
		width: 100%;
		height: 4px;
		margin-bottom: 4px;
		background-color: var(--color-dark);
	}
	&.is-light-on-dark .burger-line {
		background-color: var(--color-light);
	}
}

/* Hero Header */
.HeroHeader {
	width: 100%;
	max-width: 2000px;
	margin-inline: auto;
	position: relative;
	background-color: var(--color-bg-navy);
	background-size: cover;
	background-position: center;
	@media (max-width: 699px) {
		& {
			/* background-image: url('assets/mobile-poster-optimized.webp'); */
			min-height: 700px;
		}
	}
	@media (min-width: 700px) {
		& {
			/* background-image: url('assets/desktop-poster-optimized.webp'); */
			height: 80dvh;
			min-height: 600px;
		}
	}

	&:after {
		content: '';
		width: 100%;
		height: 100px;
		position: absolute;
		z-index: 2;
		bottom: 0;
		background-image: linear-gradient(to top,
		rgba(23, 41, 77, 1.00) 0%,
		rgba(23, 41, 77, 0.92) 9%,
		rgba(23, 41, 77, 0.738) 19%,
		rgba(23, 41, 77, 0.541) 34%,
		rgba(23, 41, 77, 0.382) 47%,
		rgba(23, 41, 77, 0.278) 56.5%,
		rgba(23, 41, 77, 0.194) 65%,
		rgba(23, 41, 77, 0.126) 73%,
		rgba(23, 41, 77, 0.075) 80.2%,
		rgba(23, 41, 77, 0.042) 86.1%,
		rgba(23, 41, 77, 0.021) 91%,
		rgba(23, 41, 77, 0.008) 95.2%,
		rgba(23, 41, 77, 0.002) 98.2%,
		transparent 100%);
	}

	@media (max-width: 699px) {
		& .lettering {
			display: inline;
		}
	}

	& .video,
	& .poster {
		max-width: 100%;
		height: auto;
		position:absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: var(--color-bg-navy);
		object-fit: cover;
		object-position: center;
	}

	& .overlay {
		/* max-width: 80ch; */
		position: absolute;
		top: min(120px, 10dvh);
		left: 0;
		z-index: 2;
		padding: 3rem 0 3rem 5rem;
	}
	@media(min-width: 1000px) {
		& .overlay {
			top: min(140px, 20dvh);
		}
	}

	& .overlay:before {
		content: '';
		position: absolute;
		top: 3.6rem;
		left: 0;
		background-color: var(--color-accent);
		width: 3rem;
		height: 3rem;
	}

	& .heading {
		font-size: 3rem;
		color: white;
		text-shadow: 0px 0px 3px #000000;
		margin-bottom: 0.5em;
		line-height: 1.3;
	}


	& .break {
		@media (max-width: 999px) {
			height: 1rem;
		}
		@media (min-width: 1000px) {
			display: inline-block;
			width: 2rem;
		}
	}
}

/* Logo Ticker */
.LogoTicker {
	background-color: var(--color-bg-navy);
	min-height: 20dvh;
	padding-block: 2rem;
    overflow: hidden;
    white-space: nowrap;
    position: relative;

	& .heading {
		font: 100 2.5rem/1.3 var(--font-body);
		font-size: clamp(2rem, 3vw, 2.5rem);
		color: var(--color-light);
		max-width: 40em;
		margin-inline: auto;
		text-align: center;
		padding-inline: 10%;
		margin-bottom: 2rem;
	}

    & .logo-track {
        display: flex;
        align-items: center;
		overflow: hidden;
    }

    & .logo-track:hover .group {
        animation-play-state: paused;
    }

	.group {
		display: flex;
        animation: 20s slides infinite linear;
		will-change: transform;
	}

    .logo {
        display: inline-block;
        margin: 1rem 2rem;
        max-height: 100px;
		aspect-ratio: 1 / 1;
    }
}

@keyframes slides {
    from { transform: translateX(0); }
    to { transform: translateX(-100%); }
}

/* Slide Columns */
.SlideColumns {
	height: 450px;
	width: 100%;
	overflow: hidden;
	opacity: 0;

	& .flickity-button {
		background: transparent;
		color: white;
		padding: unset;
	}
	& .flickity-viewport {
		height: 450px;
	}
	& .desktop-background {
		position: absolute;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		background-color: #222;
		background-size: cover;
		opacity: 0;
		transition: all 300ms ease-in;
		@media(max-width: 1000px) {
			display: none;
		}
	}
	& .desktop-background.is-active {
		opacity: 1;
	}
	& .image_shade_overlay {
		content: '';
		position: absolute;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		background-color: rgba(0, 0, 0, 0.25);
		mix-blend-mode: hard-light;
	}
	& .slide_cell {
		width: 25%;
		height: 100%;
		@media(max-width: 1000px) {
			width: 100%;
		}
	}
	& .slide_cell.is-clickable {
		cursor: pointer;
	}
	& .mobile_image {
		display: none;
		@media(max-width: 1000px) {
			display: block;
			position: absolute;
			width: 100%;
			height: 100%;
			top: 0;
			left: 0;
			background-size: cover;
		}
	}
	& .slide_cell::before {
		content: '';
		width: 1px;
		background-color: rgba(255, 255, 255, 0.2);
		height: 100%;
		position: absolute;
		left: 0;
		top: 0;
	}
	& .slide_hover_overlay {
		content: '';
		position: absolute;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		z-index: 5;
		background: rgba(0,0,0,0.5);
		opacity: 0;
		transition: opacity 300ms ease-in;
		border-left: 1px solid rgba(255, 255, 255, 0.2);
		@media(max-width: 1000px) {
			display: none;
		}
	}
	& .slide_cell.is-selected .slide_hover_overlay,
	& .slide_cell:hover .slide_hover_overlay {
		opacity: 1;
	}
	& .main_heading {
		position: absolute;
		color: white;
		z-index: 10;
		top: 2.5rem;
		left: 10%;
		font-size: 2.5rem;
		line-height: 1;
		font-weight: 600;
		@media (min-width: 1000px) {
			left: 5rem;
		}
	}
	& .slide_contents {
		position: absolute;
		bottom: 2rem;
		left: 10%;
		width: 66%;
		z-index: 11;
	}
	& .slide_headline {
		font-size: 1.4rem;
		line-height: 2rem;
		margin-bottom: 0.4em;
		font-weight: 500;
		color: white;
		text-wrap-style: balance;
	}
	& .slide_subline {
		margin-bottom: 0.4rem;
		font-size: 1rem;
		line-height: 1.4;
		font-weight: 300;
		color: white;
		max-height: 0;
		opacity: 0;
		transition: all 300ms ease-in-out;
		text-wrap-style: balance;
	}
	& .is-selected .slide_subline,
	& .slide_cell:hover .slide_subline {
		max-height: 6pc;
		opacity: 1;
	}
	& .slide_cta {
		color: white;
		display: flex;
	}
	& .cta_label {
		display: inline-block;
		max-width: 0;
		opacity: 0;
		transition: all 300ms ease-in-out;
		overflow: hidden;
		height: 1.7rem;
	}
	& .is-selected .cta_label,
	& .slide_cell:hover .cta_label {
		opacity: 1;
		max-width: 12rem;
	}
	& .cta_arrow {
		display: inline-block;
		height: 2rem;
		transition: all 300ms ease-in-out;
	}
	& .is-selected .cta_label + .cta_arrow,
	& .slide_cell:hover .cta_label + .cta_arrow {
		margin-left: 1rem;
	}

	& .slide_cell.is-selected:after {
		@media(min-width: 1000px) {
			opacity: 1;
		}
	}
}

/* Quote */
.Quote {
	background-color: var(--color-bg-dark);
	padding: 5rem 10%;
	text-align: center;

	& .quote-mark {
		margin-inline: auto;
		margin-bottom: 2rem;
		width: 50px;
		height: 50px;
		background-image: url('assets/quote-mark.png');
		background-size: contain;
	}

	& .quote {
		font: 100 2rem/1.3 var(--font-body);
		font-size: clamp(1.5rem, 3vw, 2rem);
		color: var(--color-light);
		display: block;
		max-width: 27em;
		margin-inline: auto;
	}

	& footer {
		margin-top: 3rem;
		margin-inline: auto;
		display: inline-flex;
		gap: 30px;
	}

	& .photo {
		border-radius: 100%;
		width: 100px;
		height: 100px;
	}

	& .citation {
		font: 100 1.5rem var(--font-body);
		font-size: clamp(1.1rem, 2vw, 1.5rem);
		color: var(--color-light);
		display: block;
		text-align: left;
		padding-top: 1rem;
	}

	& .logo {
		width: 200px;
		height: auto;
	}

}

/* Weather Models */
.Models {
	background-color: var(--color-light);
	padding: 5rem 10%;
	text-align: center;
	scroll-margin-top: 5rem; /* height of .NavBar */

	& .eyebrow {
		text-transform: uppercase;
		color: var(--color-dark);
		opacity: 0.75;
		letter-spacing: 0.15em;
		font-size: var(--font-size-eyebrow);
		margin-bottom: 3rem;
		font-weight: 600;
	}

	& .heading {
		font-size: 4rem;
		font-size: var(--font-size-heading);
		line-height: 1.1;
		margin-bottom: 3rem;
	}

	& .heading i {
		color: var(--color-accent);
	}

	& .intro {
		font: 200 2rem var(--font-body);
		font-size: var(--font-size-intro);
		margin-bottom: 1.5rem;
	}

	& .types {
		display: flex;
		flex-direction: column;
		gap: 1rem;
		justify-content: center;
		@media (min-width: 1000px) {
			gap: 2rem;
			flex-direction: row;
		}
	}

	& .type {
		background-color: #f2ece9;
		border: 1px solid #e0d8d3;
		text-align: center;
		padding: 1rem;
		border-radius: 1rem;
	}

	& .icon {
		display: inline-block;
		width: 30px;
		height: auto;
		margin-bottom: 0.5rem;
	}

	& .title {
		font: 500 1.25rem var(--font-body);
		margin-bottom: 0.5rem;
	}

	& .subline {
		font-weight: 300;
	}

	& .grid {
		display: grid;
		gap: 1rem;
		grid-template-columns: 1fr 1fr;
		grid-template-rows: 1fr 1fr 1fr;
		margin-bottom: 5rem;
		@media (min-width: 1000px) {
			display: grid;
			gap: 2rem;
			grid-template-columns: repeat(3, 1fr);
			grid-template-rows: 1fr 1fr;
			max-width: var(--page-width);
			margin-inline: auto;
		}
	}

	& .grid-item {
		position: relative;
	}

	& .grid-item img {
		border-radius: 1rem;
		border: 1px solid rgba(0, 0, 0, 0.25);
		height: auto;
	}

	& .name {
		position: absolute;
		left: 2rem;
		bottom: 2rem;
		color: var(--color-light);
		font: 300 1.75rem var(--font-body);
		text-shadow: 0 0 3px rgba(0, 0, 0, 0.5);
		@media (max-width: 999px) {
			font-size: 1rem;
			left: 0;
			bottom: 1rem;
			width: 100%;
			text-align: center;
			font-weight: 300;
		}
	}
}

/* Video */
.Video {
	background-color: var(--color-bg-navy);
	padding: 5rem 10%;
	text-align: center;

	& .eyebrow {
		text-transform: uppercase;
		color: var(--color-light);
		opacity: 0.75;
		letter-spacing: 0.15em;
		font-size: var(--font-size-eyebrow);
		margin-bottom: 3rem;
		font-weight: 600;
	}

	& .heading {
		color: var(--color-light);
		font-size: var(--font-size-heading);
		line-height: 1.1;
		margin-bottom: 2rem;
	}

	& .heading i {
		color: var(--color-accent);
	}

	& .intro {
		color: var(--color-light);
		opacity: 0.75;
		font: 100 2rem var(--font-body);
		font-size: var(--font-size-intro);
		margin-bottom: 3rem;
		max-width: 20em;
		margin-inline: auto;
	}

	& .video-container {
		box-shadow: 0 0 25px rgba(0, 0, 0, 0.25);
		max-width: var(--page-width);
		margin-inline: auto;
		position: relative;
	}

	& .video-container img {
		width: 100%;
		height: auto;
		opacity: 1;
		transition: opacity var(--anim-timing) ease-in-out;
		z-index: 10;
		position: relative;
	}

	& .video-container img.hidden {
		opacity: 0;
		pointer-events: none;
	}

	& iframe {
		block-size: 100%;
		border: 0;
		border-radius: inherit;
		inline-size: 100%;
		inset: 0;
		object-fit: cover;
		position: absolute;
		z-index: 1;
	}
}

.API {
	background-color: var(--color-bg-navy);
	padding: 5rem 10%;
	text-align: center;

	& .eyebrow {
		text-transform: uppercase;
		color: var(--color-light);
		opacity: 0.75;
		letter-spacing: 0.15em;
		font-size: var(--font-size-eyebrow);
		margin-bottom: 3rem;
		font-weight: 600;
	}

	& .heading {
		font-size: 4rem;
		color: var(--color-light);
		font-size: var(--font-size-heading);
		line-height: 1.1;
		margin-bottom: 4rem;
		max-width: 25em;
		margin-inline: auto;
	}

	& .heading span {
		color: var(--color-accent);
	}

	& .cards {
		display: grid;
		column-gap: 2rem;
		row-gap: 1rem;
		perspective: 600px;
		margin-bottom: 5rem;
		@media (min-width: 600px) {
			grid-template-columns: repeat(2, 1fr);
			row-gap: 2rem;
		}
		@media (min-width: 1000px) {
			grid-template-columns: repeat(3, 1fr);
			row-gap: 4rem;
		}
	}

	& .card {
		min-height: 8rem;
		cursor: alias;
		@media (min-width: 1000px) {
			min-height: 10rem;
		}
	}

	& .inner {
		position: relative;
		width: 100%;
		height: 100%;
		transform-style: preserve-3d;
		transition: transform 500ms;
	}

	& .card:hover .inner,
	& .card:focus .inner {
		transform: rotateY(-180deg);
	}

	& .card_face {
		position: absolute;
		width: 100%;
		height: 100%;
		text-align: center;
		backface-visibility: hidden;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		border-radius: 1rem;
		padding-inline: 1rem;
	}

	& .front {
		background-image: linear-gradient(to bottom, #fbbaa2, #fee6cc);
		z-index: 2;
	}

	& .front::after {
		content: '';
		position: absolute;
		top: 0.5rem;
		right: 0.5rem;
		width: 29px;
		height: 25px;
		background-image: url(assets/flip-arrow.png);
		background-size: contain;
	}


	& .back {
		background-image: linear-gradient(to bottom, #404c59, #303a45);
		transform: rotateY(180deg);
		z-index: 1;
	}

	& .icon {
		margin-bottom: 0.5rem;
	}

	& .title {
		font-size: clamp(1rem, 1.5vw, 1.3rem);
		font-weight: 600;
		margin-bottom: 1rem;
	}

	& .back .title {
		color: white;
	}

	& .details {
		font-size: clamp(0.8rem, 1vw, 1rem);
		color: var(--color-light);
		text-wrap: balance;
	}
}

.HowItWorks {
	background-color: var(--color-light);
	padding: 5rem 10% 2rem;
	text-align: center;

	& .eyebrow {
		text-transform: uppercase;
		color: var(--color-dark);
		opacity: 0.75;
		letter-spacing: 0.15em;
		font-size: var(--font-size-eyebrow);
		margin-bottom: 3rem;
		font-weight: 600;
	}

	& .heading {
		font-size: 4rem;
		font-size: var(--font-size-heading);
		line-height: 1.1;
		margin-bottom: 4rem;
		max-width: 25em;
		margin-inline: auto;
	}

	& .cards {
		@media (min-width: 1000px) {
			display: grid;
			grid-template-columns: repeat(3, 1fr);
			gap: 2rem;
			max-width: var(--page-width);
			margin-inline: auto;
		}
	}

	& .card {
		background-color: #ebedf2;
		border: 1px solid #d7dbe3;
		border-radius: 1rem;
		padding-bottom: 2rem;
		margin-bottom: 3rem;
	}

	& .image {
		border-top-right-radius: 1rem;
		border-top-left-radius: 1rem;
		height: auto;
	}

	& .number {
		font-size: 3rem;
		margin-block: 1.5rem;
		font-weight: 700;
		color: var(--color-dark);
		opacity: 0.8;
	}

	& .title {
		margin-bottom: 2rem;
		font-weight: 300;
		line-height: 1.3;
		font-family: var(--font-body);
		font-size: clamp(1.4rem, 1.9vw, 2rem);
		max-width: 80%;
		margin-inline: auto;
	}

	& .text {
		padding-inline: 10%;
		font-weight: 200;
		line-height: 1.5;
		font-family: var(--font-body);
		font-size: clamp(1rem, 1vw, 1.25rem);
		padding-bottom: 2rem;
		@media (min-width: 1000px) {
			min-height: 13em;
		}
	}
}

/* Contact Form */
.ContactForm {
	padding-top: 5rem;

	& .heading {
		font-size: 4rem;
		font-size: var(--font-size-heading);
		line-height: 1.1;
		margin-bottom: 4rem;
		color: var(--color-light);
	}

	& form {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 2rem;
		@media (max-width: 999px) {
			grid-template-columns: 1fr;
		}
	}

	& .column-first {
		display: flex;
		flex-wrap: wrap;
		gap: 2rem;
		row-gap: 3rem;
	}

	& input {
		flex: 0 1 calc(50% - 1rem);
		background: transparent;
		border: none;
		border-bottom: 1px solid var(--color-light);
		padding-left: 1rem;
		padding-block: 0.5rem;
		color: var(--color-light);
		font-weight: 600;
		@media (max-width: 999px) {
			flex: 1 1 auto;
		}
	}

	& input::placeholder,
	& textarea::placeholder {
		color: var(--color-light);
		font-weight: 100;
	}

	& input:focus {
		outline: 1px solid var(--color-light);
		border: none;
	}

	& textarea {
		width: 100%;
		border: 1px solid var(--color-light);
		background: transparent;
		min-height: 15rem;
		padding: 1rem;
		color: var(--color-light);
		font-weight: 600;
	}

	& textarea:focus {
		outline: 1px solid var(--color-light);
	}

	& button {
		border: none;
		float: right;
		margin-top: 1rem;
	}

	& .badges {
		padding-block: 5rem;
		display: flex;
		justify-content: center;
		gap: 2rem;
		@media (max-width: 999px) {
			flex-direction: column;
			align-items: center;
		}
	}

	& .badges img {
		display: inline-block;
		height: 150px;
		width: auto;
		@media (max-width: 999px) {
			height: 100px;
		}
	}
}

/* Site Footer */
.Footer {
	background-color: #1e1f30;
	padding-block: 5rem 2rem;
	border-top: 1px solid #5d6a83;

	& .logo {
		width: 200px;
		height: auto;
		max-width: 90%;
	}

	& .columns {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		gap: 1rem;
		row-gap: 2rem;
		margin-block: 3rem;
	}

	& .columns nav {
		flex: 1 0 47%;
		/* outline: 1px dotted red; */
		padding-right: 5%;
		@media (min-width: 1000px) {
			flex: 0 1 18%;
		}
	}

	& .columns ul {
		padding: 0;
		line-height: 2;
		font-size: 0.8em;
	}

	& .columns li {
		line-height: 1.1;
		margin-bottom: 1.5em;
	}

	& .columns .heading a {
		color: white;
		text-transform: uppercase;
		font-size: 0.8em;
		letter-spacing: 0.2em;
		margin-bottom: 1rem;
		display: block;
	}

	& .columns a {
		color: rgba(255, 255, 255, 0.7);
		font-weight: 400;
		transition: color 300ms ease-in-out;
	}

	& .columns a:hover {
		color: white;
	}

	& .columns address {
		color: white;
		font-style: normal;
		font-size: 0.8em;
		color: rgba(255, 255, 255, 0.7);
		font-weight: 600;
		margin-bottom: 1rem;
	}

	& .columns .tel {
		color: white;
	}

	& .socials li {
		display: inline-block;
	}

	& .social-icon {
		display: inline-block;
		width: 30px;
		height: auto;
		margin-right: 1rem;
	}

	& .final-line {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 2rem;
		@media (max-width: 999px) {
			flex-direction: column-reverse;
			gap: 2rem;
		}
	}

	& .copyright {
		color: white;
		order: 1;
	}

	& .legal-links {
		order: 2;
	}

	& .legal-links ul {
		margin: 0;
		padding: 0;
	}

	& .legal-links li {
		display: inline-block;
		padding-inline: 0.5rem;
		margin-block: 0.5rem;
		border-right: 1px solid rgba(255, 255, 255, 0.5);
	}

	& .legal-links li:last-of-type {
		border: none;
	}

	& .legal-links a {
		color: white;
		font-size: 0.8em;
	}

	& .contact {
		display: flex;
		flex-direction: column;
		gap: 1rem;
		@media (max-width: 999px) {
			flex: 1 1 100%;
			flex-direction: row;
		}
	}

	& .contact > * {
		flex: 1 0 47%;
	}
}