@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  src: url('/fonts/montserrat-v24-latin-regular.woff2') format('woff2'),
       url('/fonts/montserrat-v24-latin-regular.woff') format('woff');
}

@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 600;
  src: url('/fonts/montserrat-v24-latin-600.woff2') format('woff2'),
       url('/fonts/montserrat-v24-latin-600.woff') format('woff');
}


:root {
	--bg-color-hsl: 44, 45%, 94%;
	--text-color-hsl: 0, 0%, 18%;
	--link-color-hsl: 32, 73%, 36%;  /* 28, 40%, 40% */

	--bg-color: hsl(var(--bg-color-hsl));
	--text-color: hsl(var(--text-color-hsl));
	--link-color: hsl(var(--link-color-hsl));

	--brand-color-hsl: 32, 64%, 58%;  /* 33, 54%, 51% */
	--brand-color-hsl-300: 28, 22%, 80%;
	--brand-color-hsl-400: 28, 22%, 67%;
	--brand-color-hsl-500: 28, 22%, 50%;

	--brand-color: hsl(var(--brand-color-hsl));
	--brand-color-300: hsl(var(--brand-color-hsl-300));
	--brand-color-400: hsl(var(--brand-color-hsl-400));
	--brand-color-500: hsl(var(--brand-color-hsl-500));

	--nav-height: 3.5rem;
	--nav-bg-color-hsl: 44, 45%, 14%, .3;
	--nav-shade-color-hsl: 44, 45%, 6%, .9;
	--nav-shade-color-frost-hsl: 44, 45%, 6%, .78;
	--nav-text-color-hsl:0, 0%, 80%;

	--nav-bg-color: hsla(var(--nav-bg-color-hsl));
	--nav-shade-color: hsla(var(--nav-shade-color-hsl));
	--nav-shade-color-frost: hsla(var(--nav-shade-color-frost-hsl));
	--nav-text-color: hsl(var(--nav-text-color-hsl));

	--footer-bg-color-hsl: 44, 45%, 9%, 1;
	--footer-text-color-hsl: 0, 0%, 90%;
	--footer-link-color-hsl: var(--brand-color-hsl);

	--footer-bg-color: hsla(var(--footer-bg-color-hsl));
	--footer-text-color: hsl(var(--footer-text-color-hsl));
	--footer-link-color: var(--brand-color);

	--line-height: 1.6em;
	--word-spacing: 0.05em;

	--ff-sans: "Montserrat", "Verdana", sans-serif;

	--fs-100: .7rem;
	--fs-200: .8rem;
	--fs-300: .9rem;
	--fs-400: 1.05rem;
	--fs-500: 1.15rem;
	--fs-600: 1.25rem;
	--fs-700: 1.55rem;
	--fs-800: 2.05rem;
	--fs-900: 2.3rem;

	--fw-regular: 400;
	--fw-bold: 600;
	--fw-strong: 600;

	--size-100: .25rem;
	--size-200: .5rem;
	--size-300: .75rem;
	--size-400: 1rem;
	--size-500: 2rem;
	--size-600: 4rem;

	--size-auto: clamp(var(--size-500), var(--size-400) + 4vw, var(--size-600));
}

/*
	--------------------------------
		Reset
	--------------------------------
*/

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

body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd {
	margin: 0;
}

ul[role='list'],
ol[role='list'] {
	list-style: none;
	margin: 0;
	padding: 0;
}

html:focus-within {
	scroll-behavior: smooth;
}

body {
	font-size: clamp(.9rem, 1.5vw + .5rem, 1.05rem);
	font-family: var(--ff-sans);
	background-color: var(--footer-bg-color);
	color: var(--text-color);
	word-spacing: var(--word-spacing);
	min-height: 100vh;
	min-height: 100dvh;
	text-rendering: optimizeSpeed;
	line-height: 1.5;

	display: grid;
	grid-template-rows: min-content 1fr min-content;
}

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

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

input,
button,
textarea,
select {
	font: inherit;
}

/*
	--------------------------------
		Site containers
	--------------------------------
*/

.site-header {
	display: flex;
	place-items: center;
	justify-content: center;
	position: sticky;
	top: 0;
	height: var(--nav-height);
	z-index: 999;
}

.site-main {
	display: grid;
	grid-template-rows: max-content 1fr;
	margin-top: calc(var(--nav-height) * -1);
	position: relative;
	isolation: isolate;
	z-index: 10;

	perspective: 1px;
	perspective-origin: top center;
	transform-style: preserve-3d;
}

.site-main > .content-heading {
	--_height: clamp(15rem, 5rem + 25vw, 25rem);

	display: grid;
	place-items: center;
	padding-top: var(--nav-height);
	min-height: var(--_height);
	background-image: var(--_hero_blur);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	background-color: var(--brand-color-500);
	width: 100%;

	position: sticky;
	top: 0;
	transform: translate3d(0, 50%, -1px) scale(2);
}

.site-main > .content-heading > .hero {
	position: absolute;
}

.site-main > .content-heading > .hero > img {
	width: 100vw;
	height: var(--_height);
	object-fit: cover;
	object-position: center;
}

.site-main > .content-heading h1:not([class~=logo-image]) {
	font-size: clamp(1.5rem, .5rem + 5vw, 3rem);
	padding: 1rem 2.5rem;
	background-color: var(--nav-shade-color-frost);
	border-radius: var(--size-200);
	color: var(--brand-color);
	text-shadow:
							-1px -1px 1px hsla(33, 54%, 21%, .5),
							 1px -1px 1px hsla(33, 54%, 21%, .5),
							-1px  1px 1px hsla(33, 54%, 31%, .5),
							 1px  1px 1px hsla(33, 54%, 31%, .5);
}

@supports (backdrop-filter: blur(8px)) or (-webkit-backdrop-filter: blur(8px)) {
	.site-main > .content-heading h1:not([class~=logo-image]) {
		backdrop-filter: blur(8px);
		-webkit-backdrop-filter: blur(8px);
	}
}

.site-main > .content {
	display: flex;
	justify-content: center;
	padding: var(--size-auto) clamp(.25rem, .1rem + 5vw, 3rem);
	position: relative;
	background-color: var(--bg-color);
	z-index: 9;
	box-shadow: 0 0 10px 5px hsla(var(--brand-color-hsl-500), .75);
	min-height: calc(100vh - clamp(10rem, 5rem + 25vw, 25rem));
	min-height: calc(100dvh - clamp(10rem, 5rem + 25vw, 25rem));
}

/*
	--------------------------------
		Utilities
	--------------------------------
*/

.visually-hidden {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

.hidden {
	display: none !important;
	width: 0 !important;
	height: 0 !important;
}

.noscroll {
	overflow: hidden;
}

.flow { --flow-spacing: var(--size-400); }
.flow--small { --flow-spacing: var(--size-200); }
.flow--medium { --flow-spacing: var(--size-500); }
.flow--large { --flow-spacing: var(--size-600); }
.flow--adapt { --flow-spacing: var(--size-auto); }

.flow > * + * {
	margin-top: var(--flow-spacing, 0);
}

.grid {
  display: grid;
  gap: var(--gap, 1rem);
	align-items: start;
}

.grid--columns {
	grid-auto-flow: column;
}

.grid > .span-row-2 {
	grid-row: span 2;
}

.grid-span--all {
  grid-column: 1 / -1;
}

.col-1 {
	width: 100%;
	max-width: var(--col-width, 80ch);
}

.col-2 {
	--gap: var(--size-auto);

	justify-content: center;
}

@media (min-width: 700px) {
	.col-2 {
		grid-template-columns: repeat(2, minmax(10rem, var(--col-width, 60ch)));
	}
}

.col--small {
	--col-width: 40ch;
}

.col--medium {
	--col-width: 60ch;
}

.col--large {
	--col-width: 80ch;
}

.col--max {
	--col-width: 100vw;
}

.gap--none { --gap: 0; }
.gap--default { --gap: var(--size-400); }

.gap--small { --gap: var(--size-200); }
.gap--medium { --gap: var(--size-500); }
.gap--large { --gap: var(--size-600); }
.gap--adapt { --gap: var(--size-auto); }

.center-x { justify-content: center; }
.center-self-x { justify-self: center; }
.center-items-x { justify-items: center; }
.center-items-y { align-items: center; }

.text-center { text-align: center; }
.text-middle { vertical-align: middle; }

.fw-regular { font-weight: var(--fw-regular); }
.fw-bold { font-weight: var(--fw-bold); }
.fw-strong { font-weight: var(--fw-strong); }

.fs-900 { font-size: var(--fs-900); }
.fs-800 { font-size: var(--fs-800); }
.fs-700 { font-size: var(--fs-700); }
.fs-600 { font-size: var(--fs-600); }
.fs-500 { font-size: var(--fs-500); }
.fs-400 { font-size: var(--fs-400); }
.fs-300 { font-size: var(--fs-300); }
.fs-200 { font-size: var(--fs-200); }
.fs-100 { font-size: var(--fs-100); }

.fs-adapt-5 { font-size: 105%; }
.fs-adapt-10 { font-size: 110%; }
.fs-adapt-20 { font-size: 120%; }

.underline {
	text-decoration: underline;
	text-underline-offset: .175em;
}

.lowercase { text-transform: lowercase; }
.uppercase { text-transform: uppercase; }
.italic { font-style: italic; }
.normal { font-style: normal; }

picture.cover,
img.cover,
iframe.cover {
	border: 1px solid var(--brand-color-400);
	border-radius: var(--size-200);
	box-shadow: 0px 0px .5rem 0px var(--brand-color-500);
	overflow: hidden;
	background-color: var(--brand-color-500);
}

picture.cover > img,
img.cover {
	width: 100%;
	height: auto;
	object-fit: cover;
	object-position: center;
}

picture > img {
	opacity: 1;
	transition: opacity 250ms ease-in-out;
}

picture.loading > img {
	opacity: 0;
}

.margin-block-start-100 { margin-top: var(--size-100); }
.margin-block-start-200 { margin-top: var(--size-200); }
.margin-block-start-300 { margin-top: var(--size-300); }
.margin-block-start-400 { margin-top: var(--size-400); }
.margin-block-start-500 { margin-top: var(--size-500); }
.margin-block-start-600 { margin-top: var(--size-600); }

.margin-block-100 { margin-top: var(--size-100); margin-bottom: var(--size-100); }
.margin-block-200 { margin-top: var(--size-200); margin-bottom: var(--size-200); }
.margin-block-300 { margin-top: var(--size-300); margin-bottom: var(--size-300); }
.margin-block-400 { margin-top: var(--size-400); margin-bottom: var(--size-400); }
.margin-block-500 { margin-top: var(--size-500); margin-bottom: var(--size-500); }
.margin-block-600 { margin-top: var(--size-600); margin-bottom: var(--size-600); }

/*
	--------------------------------
		Navigation
	--------------------------------
*/

/* a11y */

.skip-to-content {
	--text-color: #222;
	--border: .125em solid var(--text-color, #222);

	position: absolute;
	width: 1px;
	height: 1px;
	top: 0;
	left: 0;
	margin: 0;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	padding: .5rem 1rem;
	background-color: var(--brand-color);
	color: var(--text-color);
	font-weight: 600;
	border-bottom: var(--border);
	border-right: var(--border);
	border-bottom-right-radius: .5rem;
	transform: translateY(-100%);
	transition: transform 100ms linear;
}

.skip-to-content:focus {
	z-index: 20;
	width: auto;
	height: auto;
	clip: auto;
	outline: none;
	transform: translateY(0);
}

/* primary navigation */

.site-nav {
	color: var(--nav-text-color);
	font-size: 1rem;
	text-transform: uppercase;
	font-weight: 600;
}

.site-nav__menu {
	display: flex;
	flex-direction: column;
}

.site-nav__menu li {
  position: relative;
}

.site-nav__menu a {
	color: currentColor;
	text-decoration: none;
	position: relative;
	text-shadow:
		 -1px -1px 1px hsla(33, 54%, 31%, .5),
			1px -1px 1px hsla(33, 54%, 31%, .5),
		 -1px  1px 1px hsla(33, 54%, 31%, .5),
			1px  1px 1px hsla(33, 54%, 31%, .5);
}

.site-nav__menu .dropdown {
  display: flex;
  top: 100%;
  left: 0;
  white-space: nowrap;
  font-size: 90%;
}

.site-nav__toggle {
	--pos: 1rem;
  --size: 1.5rem;

  display: block;
  position: absolute;
	top: var(--pos);
	left: calc(var(--pos) * 1.5);
  width: var(--size);
  height: var(--size);
  border: 0;
	outline: 0;
	box-shadow: none;
	padding: 0;
	color: var(--nav-text-color);
	background: none;
}

.site-nav__toggle:focus,
.site-nav__toggle:hover {
	border: 0;
	border-radius: 0;
	outline: .125em solid var(--brand-color);
	outline-offset: .25em;
	color: var(--nav-text-color);
	background: none;
}

.site-nav__toggle-icon,
.site-nav__toggle-icon::before,
.site-nav__toggle-icon::after {
	--height: .15rem;

	width: 100%;
	height: var(--height);
	background-color: var(--nav-text-color);
	position: relative;
	border-radius: 100vmax;
}

.site-nav__toggle-icon::before,
.site-nav__toggle-icon::after {
	position: absolute;
	content: '';
	left: 0;
	top: calc((var(--size) - var(--height))  / 3 * -1);
	transition: top, transform;
			transition-duration: 0s, 0s;
			transition-timing-function: ease, ease;
	transition-duration: .1s;
	transition-timing-function: ease-in-out;
}

.site-nav__toggle-icon::after {
	top: calc((var(--size) - var(--height))  / 3);
}

.site-nav__toggle[aria-expanded=true] .site-nav__toggle-icon {
	background: transparent;
}

.site-nav__toggle[aria-expanded=true] .site-nav__toggle-icon::before {
	top: 0;
	transform: rotate(-45deg);
}

.site-nav__toggle[aria-expanded=true] .site-nav__toggle-icon::after {
	top: 0;
	transform: rotate(45deg);
}

@media (max-width: 749px) {
	.site-nav {
		position: absolute;
		min-height: calc(100vh - var(--nav-height));
		min-height: calc(100dvh - var(--nav-height));
		height: 100%;
		top: var(--nav-height);
		left: 0;
		max-width: 30ch;
		width: 100%;
		padding: 0;
		border-top: 1px solid hsla(0, 0%, 0%, .25);
		border-right: 3px solid hsla(0, 0%, 0%, .25);
		background-color: var(--nav-shade-color);
		display: block;
		transform: translateX(-100%);
		transition: transform 175ms ease-in-out;
	}

	@supports (backdrop-filter: blur(8px)) or (-webkit-backdrop-filter: blur(8px)) {
		.site-nav {
			background-color: var(--nav-shade-color-frost);
			backdrop-filter: blur(8px);
			-webkit-backdrop-filter: blur(8px);
		}
	}

	.site-nav[data-visible] {
		transform: translateY(0);
	}

	/* defines clickable region for menu dismissal */
	.site-nav[data-visible]::after {
		content: '';
		position: absolute;
		background-color: transparent;
		z-index: -1;
		top: 0;
		left: 0;
		height: 100vh;
		height: 100dvh;
		width: 100vw;
	}

	.site-nav .site-nav__menu {
		height: 100%;
		overflow-y: auto;
		padding: 2rem;
		padding-right: 0;
	}

	.site-nav .site-nav__menu > li + li {
		margin-top: 1.75em;
	}

	.site-nav .site-nav__menu .dropdown {
		display: flex;
		flex-direction: column;
		margin-left: .5em;
		margin-top: .75em;
	}

	.site-nav .site-nav__menu .dropdown > li + li {
		margin-top: .75em;
	}

	.site-nav__menu a[href="#"] {
		pointer-events: none;
	}
}

@media (min-width: 750px) {
	:root {
		--nav-height: 4rem;
	}

	.site-nav__toggle {
		display: none;
	}

	.site-nav {
		display: flex;
		font-size: clamp(.85rem, .25rem + 2vw, 1.1rem);
	}

	.site-nav__menu {
		flex-direction: row;
		width: 100%;
	}

	.site-nav__menu > li + li {
		margin-left: 3em;
	}

	.site-nav__menu .dropdown {
		display: none;
		top: 100%;
		left: 0;
		white-space: nowrap;
		font-size: 90%;
		background-color: hsl(44, 45%, 6%);
		margin-top: .5rem;
		padding: 1em;
		border-radius: var(--size-100);
		width: calc(100% + 2em);
		left: -1em;
	}

	.site-nav__menu .dropdown > * + * {
		margin-top: 1em;
	}

	.site-nav__menu a[aria-expanded] {
		position: relative;
	}

	.site-nav__menu a[aria-expanded=true] {
		z-index: 1;
		overflow: auto;
		transition: 500ms;
	}

	.site-nav__menu a[aria-expanded=true] + .dropdown {
		display: block;
		min-width: max-content;
		filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .4));
	}

	.site-nav__menu a[aria-expanded=true] + .dropdown {
		position: absolute;
	}

	.site-nav__menu a:hover,
	.site-nav__menu a:focus,
	.site-nav__menu a:focus-within,
	.site-nav a[aria-expanded=true] {
		text-decoration: inherit;
		outline: 0;
	}

	.site-nav__menu a::before {
		--width-offset: .25em;

		content: '';
		position: absolute;
		left: calc(var(--width-offset) * -1);
		top: 110%;
		width: calc(100% + (var(--width-offset) * 2));
		height: .25em;
		border-radius: 100vmax;
		transform: scaleX(0);
		transition: transform 100ms ease-in;
	}

	.site-nav__menu a::before {
		background-color: var(--brand-color);
	}

	.site-nav a[aria-expanded]::before {
		background-color: currentColor;
	}

	.site-nav__menu a:hover::before,
	.site-nav__menu a:focus::before,
	.site-nav a[aria-expanded=true]:before {
		transform: scaleX(1);
	}
}

.glass {
	position: absolute;
	background-color: var(--nav-shade-color);
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
}

@supports (backdrop-filter: blur(8px)) or (-webkit-backdrop-filter: blur(8px)) {
	.glass {
		background-color: var(--nav-shade-color-frost);
		backdrop-filter: blur(8px);
		-webkit-backdrop-filter: blur(8px);
	}
}

/*
	--------------------------------
    Footer
  --------------------------------
*/

.site-footer {
	padding: 2rem 1rem;
	font-size: var(--fs-300);
	color: var(--footer-text-color);
	background-color: var(--footer-bg-color);
	display: grid;
	gap: 2rem 1rem;
	grid-template-columns: repeat(2, minmax(15ch, 1fr));
	position: sticky;
	bottom: 0;
	left: 0;
	width: 100%;
}

.site-footer a {
	color: var(--footer-link-color);
}

.site-footer > * {
	justify-self: center;
}

.site-footer > *:not(.store-social) > :first-child {
	margin-bottom: .25em;
}

.site-footer .store-links,
.site-footer .store-location,
.site-footer .store-hours {
	display: grid;
	grid-template-columns: max-content;
	gap: .25em;
}

.site-footer .store-social {
	display: grid;
	grid-auto-flow: column;
	gap: 1rem;
}

.site-footer .store-links li + li {
	margin-top: .25em;
}

.site-footer .store-hours,
.site-footer .store-social {
	grid-column: 1 / -1;
}

.site-footer .store-hours .table {
	border-collapse: collapse;
	border: 0;
	table-layout: fixed;
}

.site-footer .store-hours .table th + td {
	padding-left: 1.2em;
}

@media (min-width: 650px) {
	.site-footer {
		grid-template-columns: repeat(3, minmax(15ch, 40ch));
		align-items: flex-start;
		justify-content: center;
		justify-items: center;
	}

	.site-footer .store-hours {
		grid-column: auto;
	}
}

@media (min-width: 950px) {
	.site-footer .store-links,
	.site-footer .store-hours {
		justify-self: auto;
	}
}

/*
  --------------------------------
    Common elements
  --------------------------------
*/

:target {
	scroll-margin-top: var(--nav-height);
}

p {
  line-height: var(--line-height);
}

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

a:hover {
	text-decoration: underline;
	text-underline-offset: .175em;
}

a:focus {
	outline: .125rem solid currentColor;
	outline-offset: .25em;
}

h1,
h2,
h3,
h4,
strong {
	font-weight: 600;
}

.list {
	margin: .5em 0 0 0;
	padding-left: 1.5em;
	line-height: 1.8;
}

.list--check {
	list-style: none;
	padding-left: .5em;
}

.list--check li::before {
	content: '✔︎';
	padding-right: .75em;
	font-size: .75em;
	opacity: .75;
}

/* Forms */

form.grid {
	--gap: var(--fs-600);
}

.form-group {
	display: grid;
	gap: 0.65rem;
}

.label {
	text-transform: uppercase;
	font-size: var(--fs-300);
	font-weight: var(--fw-bold);
}

.label > .required {
	text-transform: lowercase;
	font-size: var(--fs-200);
	font-weight: var(--fw-regular);
}

.form-field {
	--color: inherit;
	--bg-color: var(--brand-color-400);
}

.form-field:focus {
	--bg-color: var(--brand-color-300);
}

.button {
	--color: var(--brand-color);
	--bg-color: var(--footer-bg-color);

	font-weight: 600;
	cursor: pointer;
}

.button:disabled {
	cursor: not-allowed;
}

.button:hover,
.button:focus {
	--color: var(--footer-bg-color);
	--bg-color: var(--brand-color);
}

.form-field,
.button {
	--shadow-blur: 3px;

	color: var(--color);
	background-color: var(--bg-color);
	border-radius: var(--size-100);
	padding: var(--size-300) var(--size-400);
	border: 0;
	box-shadow: 0px 0px var(--shadow-blur) 0px var(--brand-color-500);
}

.form-field:focus,
.button:focus,
.button:hover {
	--shadow-blur: 6px;

	outline: .025em solid var(--brand-color-500);
	outline-offset: -.025em;
}

.form-field::placeholder {
	color: var(--text-color);
	opacity: .6;
	font-style: italic;
	font-size: 85%;
}

.form-field:focus-within::placeholder {
	opacity: .3;
}

textarea {
	min-height: 15ch;
}

.form-group > .button {
	margin-top: var(--size-400);
	justify-self: center;
	min-width: 15ch;
}

/*
  --------------------------------
    Other
  --------------------------------
*/

a.social-icon {
	display: inline-block;
	color: inherit;
	line-height: 1;
}

a.social-icon .facebook {
	--_social-color: #1877F2;
}

a.social-icon .instagram {
	--_social-color: #E4405F;
}

a.social-icon:hover svg,
a.social-icon:focus svg {
	color: var(--_social-color, var(--brand-color));
}

a.social-icon > svg {
	max-width: 2em;
	max-height: 2em;
}

video {
	display: block;
	max-width: 100%;
	height: auto;
	border: 1px solid var(--brand-color-400);
	border-radius: var(--size-200);
	box-shadow: 0px 0px .5rem 0px var(--brand-color-500);
}

/* set turnstile captcha to inline so it won't take up grid space */
.cf-turnstile {
	display: inline-flex;
}