@layer root, global, components, overrides;@font-face {
	font-family: 'Archivo';
	font-style: normal;
	font-display: swap;
	src: url('./fonts/Archivo-VariableFont_wdth,wght.woff2') format('woff2'),
		url('./fonts/Archivo-VariableFont_wdth,wght.ttf') format('truetype');
}@font-face {
	font-family: 'Archivo';
	font-style: italic;
	font-display: swap;
	src: url('./fonts/Archivo-Italic-VariableFont_wdth,wght.woff2') format('woff2'),
		url('./fonts/Archivo-Italic-VariableFont_wdth,wght.ttf') format('truetype');
}@view-transition {
	navigation: auto;
}@layer root {
	:root {
		--font-family-default: Archivo;
		--font-family-fallback: sans-serif, system-ui;
		--font-weight-regular: 400;
		--font-weight-medium: 500;
		--font-weight-semi-bold: 600;
		--font-weight-bold: 700;
		--size-12: 0.75rem;
		--size-16: 1rem;
		--size-24: 1.5rem;
		--size-36: 2.25rem;
		--size-40: 2.5rem;
		--size-48: 3rem;
		--size-64: 4rem;
		--color-white: hsl(0 0% 100%);
		--color-black: hsl(0 0% 0%);
		--color-violet: hsl(280 70% 50%);
		--color-violet-light: hsl(280 70% 70%);
		--color-red: hsl(0 100% 53%);
		--color-gray-5: hsl(0 0% 5%);
		--color-gray-15: hsl(0 0% 15%);
		--color-gray-30: hsl(0 0% 30%);
		--color-gray-90: hsl(0 0% 90%);
		--color-gray-95: hsl(0 0% 95%);
		--color-default: light-dark(var(--color-gray-5), var(--color-gray-90));
		--color-border: light-dark(var(--color-gray-90), var(--color-gray-30));
		--color-main-background: light-dark(transparent, var(--color-gray-15));
		--color-header-background: light-dark(var(--color-gray-95), var(--color-gray-15));
		--color-gray-background: var(--color-border);
		--color-primary-accent: light-dark(var(--color-violet), var(--color-violet-light));
		--color-light: light-dark(var(--color-gray-90), var(--color-gray-5));
		--color-link: var(--color-primary-accent);
		--color-link-hover: light-dark(var(--color-violet-light), var(--color-violet));
		--color-focus-visible: var(--color-primary-accent);
		--color-error: var(--color-red);
		--box-shadow: 0 0.5rem 0.75rem hsl(from var(--color-gray-5) h s l / 30%);
		--border-radius-value: 20px;
		--border-radius: var(--border-radius-value);
		--border-radius-bottom: 0 0 var(--border-radius-value) var(--border-radius-value);
		--border-radius-top: var(--border-radius-value) var(--border-radius-value) 0 0;
		--transition-time: 300ms;

		@media (prefers-reduced-motion: reduce) {
			--transition-time: 0m;
		}

		color-scheme: light dark;
		interpolate-size: allow-keywords;
	}
}@layer global {
	html {
		color: var(--color-default);
		font-family: var(--font-family-default), var(--font-family-fallback);
		line-height: 1.25;
		/* stylelint-disable property-no-vendor-prefix  */
		-ms-overflow-style: scrollbar;
		-ms-text-size-adjust: 100%;
		-webkit-text-size-adjust: 100%;
		-webkit-tap-highlight-color: hsl(from var(--color-black) h s l / 0%);
		/* stylelint-enable property-no-vendor-prefix  */
	
		&:focus-within {
			scroll-behavior: smooth;
		}
	
		&.lock-scroll {
			margin-inline-end: var(--scroll-width);
		}
	}
	
	body {
		background-color: var(--color-main-background);
		display: grid;
		grid-template-columns: 1fr min(100%, 78.625rem) 1fr;
		font-size: var(--size-16);
		font-weight: var(--font-weight-regular);
		margin: 0;
	
		& > * {
			grid-column: 2;
		}

		.lock-scroll & {
			overflow: hidden;
		}
	}

	::selection {
		background: #b3d4fc;
		text-shadow: none;
	}
	
	/* Remove default margins */
	figure,
	blockquote,
	dl,
	dd {
		margin: 0;
	}
	
	/* Remove default color */
	a {
		color: var(--link-color, var(--color-link));
		
		&:active,
		&:hover,
		&:focus {
			outline-color: transparent;
		}
		
		&:focus-visible {
			outline: 2px solid var(--color-focus-visible);
		}
		
		&:not(.button) {
			text-decoration-color: hsl(from var(--color-underline, var(--link-color, var(--color-link)) h s l / var(--alpha-underline, 0)));
			-webkit-text-decoration-skip: ink;
			        text-decoration-skip-ink: auto;
			transition: color var(--transition-time) ease-in-out, text-decoration-color var(--transition-time) ease-in-out;
			
			&:hover {
				--alpha-underline: 1;
				--link-color: var(--color-link-hover, currentColor);
			}
		}
	
		&[disabled] {
			cursor: none;
			pointer-events: none;
		}
	}
	
	/* Inherit fonts for inputs and buttons */
	:where(input, button, textarea, select, cite, label) {
		font: inherit;
	}
	
	/* Set textarea resize to only be vertical */
	textarea {
		resize: none;
	}
	
	/* Remove default button styles */
	button {
		border: none;
		background: none;
		color: inherit;
		cursor: pointer;
		padding: 0;
	
		&:focus-visible {
			outline: 2px solid var(--color-focus-visible);
		}
	
		&[disabled] {
			cursor: none;
			pointer-events: none;
		}
	}
	
	[role='button'] {
		cursor: pointer;
	}
	
	/* Set default font weight for strong tag */
	strong {
		font-weight: var(--font-weight-semi-bold);
	}
	
	/*
	* Set all elements to border box
	*/
	*,
	*::before,
	*::after {
		box-sizing: border-box;
	}
	
	/**
	* Set default image styles
	*/
	img {
		block-size: auto;
		font-style: italic;
		max-inline-size: 100%;
		vertical-align: middle;
	}
	
	/*
	* Set SVG to be scalable
	*/
	svg {
		block-size: auto;
		display: block;
		inline-size: 100%;
	}

	/*
	* Global class to remove list styles
	*/
	ul[role='list'],
	ul[role='tablist'] {
		list-style-type: none;
		padding-inline-start: 0;
		padding-block: 0;
		margin-block: 0;
	}

	fieldset {
		border: none;
		margin-inline: 0;
		padding: 0;
	}

	legend {
		padding: 0;
	}
}@layer global {

	:is(h1, h2, h3, h4, h5, h6), p {
		margin-block: 0;
	}

	:is(h1, h2, h3, h4, h5, h6) {
		font-size: var(--title-font-size, inherit);
		font-weight: var(--title-font-weight, var(--font-weight-semi-bold));
		line-height: 1.1;
		text-wrap: balance;

		&:not(:last-child) {
			margin-block-end: 24px;
		}
	}

	p {
		text-wrap: pretty;

		& + p {
			margin-block-start: 12px;
		}

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

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

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

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

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

	.title-divider {
		display: grid;
		gap: 16px;

		&::before {
			background-color: var(--color-primary-accent);
			block-size: 4px;
			content: '';
			inline-size: 48px;
		}
	}

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

	.copy-small {
		font-size: var(--size-12);
	}
}@layer global {
	.logo {
		display: inline-block;
		flex-shrink: 0;
		max-inline-size: var(--logo-width, 208px);

		& path {
			fill: var(--logo-color, var(--color-gray-5));
		}
	}

	.center-content {
		--section-gutter: 15px;
		--content-max-width: 65rem;
		--breakout-max-width: 71.8125rem;
		--breakout-size: calc((var(--breakout-max-width) - var(--content-max-width)) / 2);

		display: grid;
		grid-template-columns:
		[full-width-start] minmax(var(--section-gutter), 1fr)
		[breakout-start breakout-left-start] minmax(0, var(--breakout-size))
		[content-start breakout-right-start]
			min(100% - var(--section-gutter) * 2, var(--content-max-width))
		[content-end breakout-left-end]
		minmax(0, var(--breakout-size))[breakout-end breakout-right-end]
		minmax(var(--section-gutter), 1fr) [full-width-end];
		row-gap: 40px;

		@media (width >= 48em) {
			--section-gutter: 30px;
		}

		& > * {
			grid-column: content;
		}

		& .breakout {
			grid-column: breakout;
		}

		& .breakout-left {
			grid-column: breakout-left;
		}

		& .breakout-right {
			grid-column: breakout-right;
		}

		& .full-width {
			grid-column: full-width;
		}
	}

	.section-block {
		display: grid;
		margin-block: var(--section-margin, 32px);

		@media (width >= 48em) {
			--section-spacing: 40px;
			--section-margin: 72px;

			&.small-margin {
				--section-margin: 40px;
			}
		}
	}

	.section-row {
		display: grid;
		gap: 22px;

		@media (width >= 48em) {
			grid-template-columns: repeat(2, 1fr);
		}
	}
}@layer components {
	.banner {
		background-color: var(--color-gray-background);
		border-radius: var(--border-radius);
		box-shadow: var(--box-shadow);
		padding-block: 46px;
	}

	.banner-content {
		display: grid;
		gap: 24px;

		@media (width >= 48em) {
			align-items: center;
			grid-auto-flow: column;
			justify-content: space-between;
		}
	}

	.banner-column {
		max-inline-size: 75ch;
	}
}@layer components {
	.button-container {
		align-items: center;
		display: flex;
		flex-wrap: wrap;
		gap: 12px;
	}

	.button {
		background-color: var(--button-background, var(--color-default));
		border-radius: 100vw;
		color: var(--button-color, var(--color-light));
		padding: .625em 2.125em;
		text-decoration: underline;
		text-transform: uppercase;
		text-decoration-color: hsl(from var(--color-underline, var(--button-color, var(--color-light)) h s l / var(--alpha-underline, 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 {
			--alpha-underline: 1;
			--button-background: var(--color-primary-accent);
		}
	}
}@layer components {
	.card {
		align-items: start;
		display: flex;
		flex-direction: var(--card-direction, column);
		gap: 16px;
		reading-flow: flex-visual;

		@media (width >= 48em) {
			--card-direction: row;
		}

		&.image-right {
			--card-direction: column-reverse;

			@media (width >= 48em) {
				--card-direction: row-reverse;
			}
		}

		& img {
			inline-size: 100%;
		}
	}

	.card-image {
		border-radius: var(--border-radius);
		box-shadow: var(--box-shadow);
		overflow: hidden;

		@media (width >= 48em) {
			flex: 1;
		}
	}

	.card-content {
		@media (width >= 48em) {
			flex: 1.2;
		}

		@media (width >= 62em) {
			flex: 1.5;
		}
	}
}@layer components {
	.footer {
		--logo-color: var(--color-gray-90);
		--color-link: var(--color-gray-90);
		--color-link-hover: var(--color-gray-90);
		
		background-color: var(--color-gray-5);
		border-radius: var(--border-radius-top);
		color: var(--color-gray-90);
		padding-block: 24px 48px;

		@media (width >= 48em) {
			padding-block: 48px 62px;
		}
	}

	.footer-content {
		display: grid;
		gap: 45px;
		justify-content: center;

		@media (width >= 48em) {
			gap: 92px;
			grid-template-columns: auto 1fr;
		}
	}

	.footer-links {
		display: grid;
		gap: 56px;
		justify-items: center;

		@media (width >= 48em) {
			gap: 14px;
			justify-items: start;
		}

		& ul {
			display: flex;
			gap: 24px;
			
			@media (width < 48em) {
				flex-direction: column;
				text-align: center;
			}
		}

		& p {
			@media (width < 48em) {
				max-inline-size: 20ch;
				text-align: center;
			}
		}
	}
}@layer components {
	.form {
		display: grid;
	}

	.form-submit {
		grid-column: 1;
		grid-row: 1;
		transition: opacity var(--transition-time) ease-in-out, display var(--transition-time) allow-discrete;

		&[aria-hidden='true'] {
			opacity: 0;
		}
	}

	.form-grid {
		display: grid;
		gap: 33px 16px;
		grid-template-columns: auto 1fr;
		margin-block-end: 30px;
	}

	.form-group {
		background-color: var(--color-gray-background);
		border-radius: var(--border-radius);
		display: grid;
		grid-column: 1 / -1;
		grid-template-columns: subgrid;
		position: relative;
		outline: 2px solid var(--form-outline-color, transparent);
		transition: outline-color var(--transition-time) ease-in-out;

		&:focus-within {
			--form-outline-color: var(--color-primary-accent);
		}

		&:focus-within,
		&:has(:where(.form-input, .form-textarea):not(:placeholder-shown)),
		&:has(option[value='']:not(:checked)) {
			--label-alpha: 50%;
		}

		&:has(.form-textarea) {
			padding-block-start: 12px;
		}

		&:has([aria-invalid='true']) {
			outline: 2px solid var(--color-red);

			& p {
				display: block;
				opacity: 1;
	
				@starting-style {
					opacity: 0;
				}
			}
		}

		& label {
			align-items: center;
			color: hsl(from var(--color-default) h s l / var(--label-alpha, 100%));
			display: grid;
			line-height: 1;
			margin-inline-start: 25px;
			text-transform: uppercase;
			transition: color var(--transition-time) ease-in-out;
		}

		& p {
			color: var(--color-red);
			display: none;
			font-size: var(--size-12);
			margin-inline-start: 25px;
			position: absolute;
			top: calc(100% + 6px);
			transition: opacity var(--transition-time) ease-in-out, display var(--transition-time) allow-discrete;
		}
	}

	.form-input {
		-webkit-appearance: none;
		        appearance: none;
		background: none;
		border: none;
		block-size: 44px;
		line-height: 1;
		outline: none;
		padding-inline-end: 10px;
		padding: 0 10px 0 0;
	}

	.form-textarea {
		-webkit-appearance: none;
		        appearance: none;
		background: none;
		border: none;
		field-sizing: content;
		grid-column: 1 / -1;
		min-block-size: 105px;
		outline: none;
		padding: 5px 10px 13px 25px;
	}

	.form-select {
		display: grid;
		isolation: isolate;
		position: relative;

		& select {
			-webkit-appearance: none;
			appearance: base-select;
			background: none;
			border: none;
			block-size: 44px;
			inline-size: 100%;
			line-height: 1;
			outline: none;
			padding: 0 10px 0 0;

			&::picker-icon {
				-webkit-appearance: base-select;
				        appearance: base-select;
				opacity: 0;
			}

			&::-ms-expand {
				display: none;
			}
		}

		& selectedcontent {
			align-items: center;
			display: grid;
		}

		& option {
			border-radius: 8px;
			padding-block: 6px;

			&:empty {
				display: none;
			}
		}

		& ::picker(select) {
			-webkit-appearance: base-select;
			        appearance: base-select;
			background-color: var(--color-gray-background);
			border: none;
			border-radius: var(--border-radius);
			box-shadow: var(--box-shadow);
			padding: 18px 9px;
			top: calc(anchor(bottom) + 2px);
		}
	}

	.select-icon {
		aspect-ratio: 1/1;
		block-size: 24px;
		inset: 0 20px 0 auto;
		margin-block: auto;
		position: absolute;
	}

	.form-sent {
		display: none;
		grid-column: 1;
		grid-row: 1;
		transition: opacity var(--transition-time) ease-in-out, display var(--transition-time) allow-discrete;

		&[aria-hidden='false'] {
			display: block;
			opacity: 1;

			@starting-style {
				opacity: 1;
			}
		}

		& p {
			font-size: var(--size-24);
			font-weight: var(--font-weight-semi-bold);
		}

		& span {
			display: block;
			font-size: var(--size-64);
			line-height: 1;
		}
	}
}@layer components {
	.header {
		--header-background-end: hsl(from var(--color-header-background) h s l / 85%);
		--logo-color: var(--color-default);

		background-color: var(--header-background-end);
		backdrop-filter: blur(0.35rem);
		box-shadow: var(--box-shadow);
		inset: 0 0 auto 0;
		padding-block: 22px;
		position: fixed;
		z-index: 1;

		@supports (animation-timeline: view()) {
			--animation-start: 50vh;
			--animation-distance: 50vh;

			animation: header-background linear forwards;
			animation-timeline: view();
			animation-range-start: calc(50vh + var(--animation-start));
			animation-range-end: calc(
				50vh + var(--animation-start) + var(--animation-distance)
			);
			background-color: transparent;
			box-shadow: none;
		}

		&:has([aria-hidden]) {
			isolation: isolate;

			&::after {
				background-color: var(--color-header-background);
				content: '';
				inset: 0;
				opacity: var(--background-opacity, 0);
				position: absolute;
				transition: opacity var(--transition-time) ease-in-out;
				z-index: -1;
			}
		}

		&:has([aria-hidden='false']) {
			--background-opacity: 1;
		}
	}

	@keyframes header-background {
		to {
			background-color: var(--header-background-end);
			box-shadow: var(--box-shadow);
		}
	}

	.header-content {
		align-items: center;
		display: flex;
	}

	.header-nav {
		align-items: center;
		display: flex;
		flex: 1;

		@media (width < 48em) {
			background-color: var(--color-header-background);
			box-shadow: 0 0.75rem 0.75rem hsl(from var(--color-default) h s l / 30%);
			display: none;
			gap: 22px;
			inset: 100% 0 auto 0;
			justify-content: center;
			padding-block-end: 22px;
			position: absolute;

			&[aria-hidden] {
				overflow: hidden;
				transition: opacity var(--transition-time) ease-in-out,
				block-size var(--transition-time) ease-in-out,
				display var(--transition-time) allow-discrete;
			}

			&[aria-hidden='true'] {
				block-size: 0;
			}

			&[aria-hidden='false'] {
				block-size: auto;
				display: grid;
				opacity: 1;

				@starting-style {
					block-size: 0;
					opacity: 0;
				}
			}
		}
	}
	
	.header-links {
		--link-color: var(--color-default);
		--color-link-hover: currentColor;

		display: flex;
		gap: 20px;
		margin-inline: auto;
		
		@media (width < 48em) {
			flex-direction: column;
		}
		@media (width >= 62em) {
			gap: 40px;
		}
	
		& a {
			text-underline-offset: .4em;
			text-decoration-thickness: 2px;

			&[aria-current='page'] {
				--alpha-underline: 1;
				--link-color: var(--color-primary-accent);

				pointer-events: none;
			}
		}
	}

	.mobile-nav {
		display: grid;
		gap: 4px;
		inline-size: 18px;
		margin-inline-start: auto;

		@media (width >= 48em) {
			display: none;
		}

		&[aria-expanded='true'] {
			&::before,
			&::after {
				--icon-opacity: 0;

				transition:
					opacity var(--transition-time) ease-in-out,
					translate var(--transition-time) ease-in-out;
			}

			&::before {
				--icon-translate: 7px;
			}

			&::after {
				--icon-translate: -7px;
			}

			& span {
				transition: rotate var(--transition-time) ease-in-out var(--transition-time);

				&:first-of-type {
					--icon-rotate: -45deg
				}

				&:last-of-type {
					--icon-rotate: 45deg
				}
			}
		}

		&::before,
		&::after,
		span {
			background-color: var(--color-default);
			block-size: 2px;
			border-radius: 100vw;
		}
		
		&::before,
		&::after {
			content: '';
			opacity: var(--icon-opacity, 1);
			translate: 0 var(--icon-translate, 0);
			transition:
			opacity var(--transition-time) ease-in-out var(--transition-time),
			translate var(--transition-time) ease-in-out var(--transition-time);
		}
		
		span {
			grid-column: 1;
			grid-row: 2;
			rotate: var(--icon-rotate, 0);
			transition: rotate var(--transition-time) ease-in-out;
		}
	}
}@layer components {
	.hero-row {
		align-items: center;
		display: grid;
		gap: 24px;
		padding-block-start: calc(var(--header-height, 100px) + 40px);

		@media (width >= 48em) {
			grid-template-columns: 1fr 1.3fr;
		}
	}

	.hero-image {
		border-radius: var(--border-radius);
		overflow: hidden;
		
		&.overlay {
			border-radius: var(--border-radius-bottom);
			grid-row: 1;
			isolation: isolate;
			position: relative;
			z-index: -1;
	
			&::before {
				background: linear-gradient(
					180deg,
					light-dark(hsl(from var(--color-white) h s l / 80%), var(--color-gray-15)) 15%,
					light-dark(hsl(from var(--color-white) h s l / 5%), hsl(from var(--color-gray-15) h s l / 5%)) 75%
				);
				content: '';
				inset: 0;
				position: absolute;
			}
		}

		& img {
			inline-size: 100%;
		}
	}

	.hero-content {
		:has(.overlay) & {
			@media (width >= 48em) {
				grid-row: 1;
				max-inline-size: 75ch;
				padding-block-start: calc(var(--header-height, 100px) + 40px);
			}
		}
	}
}@layer components {
	.locations {
		--locations-gap: 20px;

		display: flex;
		flex-wrap: wrap;
		gap: var(--locations-gap);
		justify-content: center;

		@media (width >= 48em) {
			justify-content: space-between;
		}
	}

	.locations-box {
		/* border: 1px solid var(--color-border); */
		background-color: var(--color-border);
		border-radius: 20px;
		box-shadow: var(--box-shadow);
		flex: 1 1 calc((100% - var(--locations-gap)) / 5);
		max-inline-size: 193px;
		min-inline-size: 193px;
		padding: 24px 10px;
		text-align: center;

		& [class*='title-'] {
			margin-block-end: 0;
		}

		& p {
			font-weight: var(--font-weight-semi-bold);
			line-height: 1;
		}
		
		& span {
			display: block;
			font-size: 6rem;
			font-weight: var(--font-weight-regular);
		}
	}
}@layer components {
	.product-list {
		display: grid;
		gap: 32px;

		@media (width >= 48em) {
			grid-template-columns: repeat(2, 1fr);
			gap: 49px 27px;
		}
	}

	.product {
		border-block-end: 1px solid var(--color-border);
		padding-block-end: 16px;
	}

	.product-image {
		margin-block-end: 16px;
	}
}@layer components {
	.section-header {
		max-inline-size: 95ch;
	}
}