@font-face {
	font-family: 'lato-normal-400-fallback';
	size-adjust: 96.939%;
	src: local('Arial');
	font-display: swap;
}

@layer root, theme, resets, global, blocks, overrides;

@layer root {
	:root {
		/* Colors */
		--color-white: rgb(255 255 255);
		--color-black: rgb(0 0 0);
		--color-red-1: rgb(201 18 53);
		--color-red-2: rgb(171 14 38);
		--color-red-3: rgb(219 0 32);
		--color-gray-1: rgb(102 102 102);
		--color-gray-2: rgb(245 245 245);
		--color-gray-3: rgb(44 42 41);
		--color-gray-4: rgb(153 153 153);
		--color-gray-5: rgb(204 204 204);
		--color-gray-6: rgb(219 219 219);
		--color-gray-7: rgb(68 68 68);
		--color-gray-8: rgb(111 111 111);
		--color-gray-9: rgb(77 77 77);
		--color-gray-10: rgb(235 235 235);
		--color-gray-11: rgb(225 225 225);
		--color-gray-12: rgb(51 51 51);
		--color-gray-13: rgb(250 250 250);
		--color-yellow: rgb(255 164 26);
		--color-green: rgb(114 205 71);
		--color-blue: rgb(53 169 202);
		--color-teal: rgb(0 127 163);

		/* Variables */
		--decoration-color: #555960;
		--default-line-height: 1.6;
		--header-height: 81px;
		--link-color: var(--color-red-1);
		--primary-icon: var(--color-red-1);
		--text-color: var(--color-black);

		/* Buttons */
		--button-border-radius: 5px;
		--primary-button-color: var(--color-white);
		--primary-button-background-color: var(--color-red-1);
		--primary-button-border-color: var(--color-red-1);
		--primary-button-hover-color: var(--primary-button-color);
		--primary-button-hover-background-color: var(--color-red-2);
		--primary-button-hover-border-color: var(--primary-button-border-color);
		--secondary-button-color: var(--color-black);
		--secondary-button-background-color: var(--color-white);
		--secondary-button-border-color: var(--color-black);
		--secondary-button-hover-color: var(--color-white);
		--secondary-button-hover-background-color: var(--color-black);
		--secondary-button-hover-border-color: var(--secondary-button-border-color);
		--text-button-color: var(--color-black);
		--text-button-hover-color: var(--color-red-1);

		/* Fonts */
		--fallback-fonts: sans-serif, system-ui;
		--material-icons: 'Material Icons';
		--font-icon: 'font-icon';

		/* Rem sizes */
		--size-10: 0.625rem;
		--size-12: 0.75rem;
		--size-14: 0.875rem;
		--size-16: 1rem;
		--size-18: 1.125rem;
		--size-20: 1.25rem;
		--size-21: 1.3125rem;
		--size-24: 1.5rem;
		--size-30: 1.875rem;
		--size-34: 2.125rem;
		--size-40: 2.5rem;
		--size-50: 3.125rem;
	
		/* body sizes */
		--body-font-size-xl: var(--size-30);
		--body-font-size-l: var(--size-18);
		--body-font-size-m: var(--size-16);
		--body-font-size-s: var(--size-14);
		--body-font-size-xs: var(--size-12);
		--body-font-size-xxs: var(--size-10);
	
		/* heading sizes */
		--heading-font-size-xxl: var(--size-40);
		--heading-font-size-xl: var(--size-34);
		--heading-font-size-l: var(--size-30);
		--heading-font-size-m:  var(--size-24);
		--heading-font-size-s: var(--size-21);
		--heading-font-size-xs: var(--size-18);
		--heading-font-size-xxs: var(--size-16);

		/* Transition Time */
		--transition-time: 300ms;

		@media (width >= 75em) {
			--header-height: 101px;
			--heading-font-size-xxl: var(--size-50);
			--heading-font-size-xl: var(--size-40);
		}

		@media (prefers-reduced-motion: reduce) {
			--transition-time: 0ms;
		}
	
		/* Breakpoints used across stylesheets
		* 36em (576px)
		* 48em (768px)
		* 62em (992px)
		* 75em (1200px)
		*/

		interpolate-size: allow-keywords;
	}
}

@layer resets {
	*,
	*::before,
	*::after {
		box-sizing: border-box;
	}

	html {
		color: var(--text-color);
		font-family: var(--body-font-family), var(--fallback-fonts);
		line-height: var(--default-line-height);
		text-size-adjust: none;
		-webkit-tap-highlight-color: transparent;
	}

	body {
		font-size: var(--body-font-size-m);
		margin: 0;
	
		&:not(.appear) {
			display: none;
		}
	}

	.lock-scroll {
		margin-inline-end: var(--scroll-width);

		& body {
			overflow: hidden;
		}
	}

	:where(input, textarea, select, button, cite, label) {
		font: inherit;
	}
	
	:where(h1, h2, h3, h4, h5, h6, button, input, label) {
		line-height: 1.1;
	}

	input[type='checkbox'] {
		margin: 0;
	}

	:where(h1, h2, h3, h4, h5, h6) {
		font-size: var(--title-font-size, inherit);
		font-weight: var(--title-font-weight, 400);
		margin-block: 0;
		text-wrap: balance;
	}

	p {
		margin-block: 0;
		text-wrap: pretty;
	
		& + p {
			margin-block-start: 21px;
		}
	}

	a {
		color: var(--link-color);
		text-decoration-color: rgb(from var(--color-underline, var(--link-color)) r g b / var(--underline-alpha, 0));
		text-decoration-skip-ink: auto;

		&:not(.button) {
			transition:
				color var(--transition-time) ease-in-out,
				background-color var(--transition-time) ease-in-out,
				text-decoration-color var(--transition-time) ease-in-out,
				border-color var(--transition-time) ease-in-out;
			
			&:focus-visible {
				box-shadow: var(--focus-box-shadow, 0 0 0 1px var(--color-black), inset 0 0 0 2px var(--color-teal), inset 0 0 0 4px var(--color-white));
				outline: none;
			}

			&:hover {
				--link-color: var(--link-hover-color, var(--color-red-1));
				--underline-alpha: 1;
			}
		}
	}

	:target {
		scroll-margin-block: 5ex;
	}

	textarea {
		resize: vertical;
	}

	button {
		border: none;
		background: none;
		color: inherit;
		cursor: pointer;
		padding: 0;

		&[disabled] {
			cursor: none;
			pointer-events: none;
		}

		&:focus-visible {
			box-shadow: 0 0 0 1px var(--color-black), inset 0 0 0 2px var(--color-teal), inset 0 0 0 4px var(--color-white);
			outline: none;
		}
	}

	img {
		block-size: auto;
		font-style: italic;
		max-inline-size: 100%;
		vertical-align: middle;

		.image-full-width & {
			inline-size: 100%;
		}
	}

	iframe {
		aspect-ratio: 16/9;
		block-size: 100%;
		inline-size: 100%;
	}

	:where(.text, .carousel-column, .content-block) ul {
		& ul {
			margin-block-start: 1em;
		}

		& li {
			&::marker {
				color: var(--list-bullet-color, var(--color-black));
			}

			& + li {
				margin-block-start: 1em;
			}
		}
	}

	ul[role='list'],
	ol[role='list'] {
		list-style-type: none;
		margin-block: 0;
		padding-inline-start: 0;

		& li + li {
			margin-block-start: 0;
		}
	}

	svg {
		block-size: auto;
		inline-size: 100%;
	}

	:where(blockquote, figure) {
		margin: 0;
	}

	legend {
		padding-inline: 0;
	}

	:where(header:empty, header:has(div:empty), header:has([data-block-status='loading'])) {
		background-color: var(--color-white);
		height: var(--header-height);
		border-block-end: 1px solid rgb(from var(--color-black) r g b / 15%);
		overflow: hidden;
	}
}

@layer global {
	.sr-only {
		height: 1px;
		left: -10000px;
		overflow: hidden;
		position: absolute;
		top: auto;
		width: 1px;
	}

	/* Buttons */
	.button-container {
		display: flex;
		gap: 15px;
		flex-wrap: wrap;
		justify-content: var(--button-justify, start);

		& :where(strong, em) {
			display: contents;
		}

		& em {
			font-style: normal;
		}
	}

	.button {
		align-items: center;
		color: var(--button-color);
		display: flex;
		gap: 10px;
		justify-content: center;
		line-height: 1.25;
		letter-spacing: .15em;
		text-decoration: underline;
		text-decoration-color: rgb(from var(--color-underline, var(--button-color)) r g b / var(--underline-alpha, 0));
		transition:
			color var(--transition-time) ease-in-out,
			background-color var(--transition-time) ease-in-out,
			text-decoration-color var(--transition-time) ease-in-out;

		&:hover {
			--underline-alpha: 1;
		}

		&:focus-visible {
			box-shadow: 0 0 0 1px var(--color-black), inset 0 0 0 2px var(--color-teal), inset 0 0 0 4px var(--color-white);
			outline: none;
		}

		&:not(.primary, .secondary) {
			--button-color: var(--text-button-color);

			font-weight: 700;
			font-size: var(--body-font-size-xs);
			gap: 10px;
			text-transform: uppercase;

			&::after {
				block-size: 0.5rem;
				border-color: currentColor;
				border-style: solid;
				border-width: 2px 2px 0 0;
				content: '';
				display: block;
				inline-size: 0.5rem;
				rotate: 45deg;
				transition: border-color var(--transition-time) ease-in-out;
			}

			&:hover {
				--button-color: var(--text-button-hover-color);
			}
		}

		&:is(.primary, .secondary) {
			background-color: var(--button-background-color);
			border: 1px solid var(--button-border-color);
			border-radius: var(--button-border-radius);
			font-size: var(--body-font-size-s);
			font-weight: 700;
			padding: 1.07em 2.14em;
			text-align: center;
			text-transform: uppercase;

			@media (width < 48em) {
				&.mobile-full-width {
					inline-size: 100%;
				}
			}
		}

		&.primary {
			--button-background-color: var(--primary-button-background-color);
			--button-border-color: var(--primary-button-border-color);
			--button-color: var(--primary-button-color);
		
			&:hover,
			&:focus-visible {
				--button-background-color: var(--primary-button-hover-background-color);
				--button-border-color: var(--primary-button-hover-border-color);
				--button-color: var(--primary-button-hover-color);
			}
		}

		&.secondary {
			--button-background-color: var(--secondary-button-background-color);
			--button-border-color: var(--secondary-button-border-color);
			--button-color: var(--secondary-button-color);
			--button-max-width: 18rem;
		
			&:hover,
			&:focus-visible {
				--button-background-color: var(--secondary-button-hover-background-color);
				--button-border-color: var(--secondary-button-hover-border-color);
				--button-color: var(--secondary-button-hover-color);
			}
		}
	}

	.icon-button {
		background-color: rgb(from var(--color-gray-5) r g b / var(--search-alpha, 0));
		border-radius: 50%;
		block-size: 40px;
		inline-size: 40px;
		place-items: center;
		transition: background-color var(--transition-time) ease-in-out;

		&:hover {
			--search-alpha: .2;
		}
	}

	.breadcrumbs {
		font-size: var(--size-12);
		padding-block: 12px;

		& ul {
			display: flex;
			flex-wrap: wrap;
			gap: 10px;
		}

		& li {
			line-height: 1;

			&:has(a) {
				&::after {
					color: currentColor;
					content: '\e5cc';
					font-family: var(--material-icons);
					font-size: 1.5em;
				}
			}
		}
	}

	/* Sections */
	.section {
		display: grid;
		gap: var(--section-spacing, 32px);
		margin-block: var(--section-block-spacing, 30px);
		scroll-margin-block-start:
			calc(var(--header-height, 100px)
			+ var(--sticky-nav-height, 0px)
			+ var(--section-block-spacing, 30px));

		@media (width >= 75em) {
			--section-block-spacing: 45px;
		}
	
		&.hero-container {
			--section-block-spacing: 0;
		}

		&[class*='bg-color'] {
			margin-block: 0;
			padding-block: var(--section-block-spacing, 30px);
		}

		@media (width >= 48em) {
			&[class*='bg-overlap'] {
				background-image: linear-gradient(to top, var(--overlap-color) 130px, var(--background-color) 130px);
				margin-block: 0;
				padding-block: var(--section-block-spacing, 30px);
			}
		}

		&.bg-overlap-white {
			--overlap-color: var(--color-white);
			--background-color: var(--color-gray-2);
		}

		&.bg-overlap-gray-2 {
			--overlap-color: var(--color-gray-2);
			--background-color: var(--color-white);
		}

		&.narrow {
			--max-width: 55rem;
		}

		.blog &:not(.cards-container) {
			--max-width: 50rem;
		}

		& > * {
			inline-size: 100%;
			margin-inline: auto;
			max-inline-size: min(100% - var(--container-gutter, 0.9375rem) * 2, var(--max-width, 80rem));
		}

		&:empty {
			display: none;
		}
	}

	.light-text {
		color: var(--color-white);
	}

	.dark-text {
		color: var(--color-black);
	}

	.color-gray-1 {
		color: var(--color-gray-1);
	}

	.color-gray-7 {
		color: var(--color-gray-7);
	}

	.bg-color-red-1 {
		background-color: var(--color-red-1);
	}

	.bg-color-gray-2 {
		background-color: var(--color-gray-2);
	}

	.bg-color-gray-12 {
		background-color: var(--color-gray-12);
	}

	.title-extra-extra-large {
		--title-font-size: var(--heading-font-size-xxl);
	}

	.title-extra-large {
		--title-font-size: var(--heading-font-size-xl);
	}

	.title-large {
		--title-font-size: var(--heading-font-size-l);
	}

	.title-medium {
		--title-font-size: var(--heading-font-size-m);
	}

	.title-small {
		--title-font-size: var(--heading-font-size-s);
	}

	.title-extra-small {
		--title-font-size: var(--heading-font-size-xs);
	}

	.title-extra-extra-small {
		--title-font-size: var(--heading-font-size-xxs);
	}

	.title-underline {
		display: grid;
		gap: 20px;

		&::after {
			background-color: var(--color-gray-7);
			block-size: 5px;
			content: '';
			inline-size: 60px;
		}
	}

	.title-bold {
		--title-font-weight: 700;
	}

	.copy-semi-bold {
		font-weight: 600;
	}

	.copy-extra-small {
		font-size: var(--body-font-size-xs);
	}

	.copy-small {
		font-size: var(--body-font-size-s);
	}

	.copy-mediun {
		font-size: var(--body-font-size-s);
	}

	.copy-large {
		font-size: var(--body-font-size-l);
	}

	.copy-extra-large {
		font-size: var(--body-font-size-xl);
	}

	.copy-hero-title {
		font-size: var(--heading-font-size-m);
	}

	.text-center {
		--button-justify: center;

		text-align: center;
	}

	.desktop-only {
		@media (width < 48em) {
			display: none;
		}
	}

	.mobile-only {
		@media (width >=48em) {
			display: none;
		}
	}

	.narrow-container {
		max-width: 770px;
	}

	.no-margin {
		margin-block: 0;
	}

	.half-width-container {
		@media (width >=48em) {
			max-inline-size: 50%;
		}
	}
}

@layer overrides {
	body:has(main .section[data-section-status]:not([data-section-status='loaded']))
	:is(.section:not(.hero-container, .blog-hero-container), footer, .back-to-top),
	.block[data-block-status]:not([data-block-status='loaded']) {
		display: none !important;
	}
	
	body:has(main .section[data-section-status]:not([data-section-status='loaded']))
	:is(.breadcrumbs > ul, aside) {
		visibility: hidden !important;
	}
}