/* Resets and Variable Declarations */
:root {
	/* Device Safe Areas */
	--safe-top: env(safe-area-inset-top);
	--safe-right: env(safe-area-inset-right);
	--safe-bottom: env(safe-area-inset-bottom);
	--safe-left: env(safe-area-inset-left);

	/* Gutters */
	--gut-outer:		0.5rem;
	--gut-inner:		0.75rem;
	--gut-default:		1rem;

	/* Default UI Colors */
	--fore-primary:		#000;
	--fore-secondary: 	#333;
	--fore-tertiary:	#666;
	--back-primary:		#fff;
	--back-secondary:	#f8f8f8;
	--back-tertiary:	#f0f0f0;

	/* CTA Colors */
	--cta-grad-1: 		#f8f8f8;
	--cta-grad-2: 		#f0f0f0;

	/* Static Colors */
	--color-white:		hsl(7, 43%, 96%);
	--color-white-50:	hsla(0, 0%, 100%, 0.50);
	--color-white-12:	hsla(0, 0%, 100%, 0.125);
	--color-black:		hsla(0, 0%, 0%, 1);

	/* ATG Pallete */
	--bg: hsl(7, 43%, 96%);
	--bg-75: hsla(7, 43%, 96%, 75%);
	--bg-50: hsla(7, 43%, 96%, 50%);
	--bg-25: hsla(7, 43%, 96%, 25%);
	--bg-tint: hsl(7, 43%, 94%);
	--bg-med: hsl(7, 42%, 92%);
	--bg-dark: hsl(7, 43%, 85%);
	--inv-bg: hsl(0, 0%, 0%);
	--inv-bg-med: hsl(0, 0%, 20%);
	--fg-prime: hsl(0, 0%, 0%);
	--fg-secondary: hsl(0, 0%, 20%);
	--fg-tertiary: hsl(0, 0%, 60%);
	--fg-75: hsla(0, 0%, 0%, 0.75);
	--fg-50: hsla(0, 0%, 0%, 0.5);
	--fg-25: hsla(0, 0%, 0%, 0.25);
	--inv-fg-prime: hsla(0, 0%, 100%, 90%);

	/* Purple Palette */
	--purple-light: 	hsla(278, 100%, 85%, 1.00);
	--purple-light-75: 	hsla(278, 100%, 85%, 0.75);
	--purple-light-50: 	hsla(278, 100%, 85%, 0.50);
	--purple-light-25: 	hsla(278, 100%, 85%, 0.25);
	--purple-light-alt:	hsla(278, 100%, 80%, 1.00);
	--purple-300: 		hsla(278, 100%, 32%, 1.00);
	--purple-300-50: 	hsla(278, 100%, 32%, 0.5);
	--purple-400: 		hsla(278, 100%, 28%, 1.00);
	--purple-500: 		hsla(278, 100%, 24%, 1.00);
	--purple-800: 		hsla(278, 100%, 12%, 1.00);
	--purple-dark: 		hsla(278, 100%, 08%, 1.00);
	--purple-dark-75: 	hsla(278, 100%, 08%, 0.75);
	--purple-dark-50: 	hsla(278, 100%, 08%, 0.50);
	--purple-dark-25: 	hsla(278, 100%, 08%, 0.25);

	/* Vintage Palette */
	--vintage-light:	hsla(00, 80%, 85%, 1.00);
	--vintage-light-75:	hsla(00, 80%, 85%, 0.75);
	--vintage-light-50:	hsla(00, 80%, 85%, 0.50);
	--vintage-light-25:	hsla(00, 80%, 85%, 0.25);
	--vintage-light-alt:hsla(00, 80%, 80%, 1.00);

	--vintage-300:		hsla(00, 80%, 32%, 1.00);
	--vintage-300-50:	hsla(00, 80%, 32%, 1.00);
	--vintage-400:		hsla(00, 80%, 28%, 1.00);
	--vintage-500:		hsla(00, 80%, 24%, 1.00);
	--vintage-800:		hsla(00, 80%, 12%, 1.00);

	--vintage-dark:		hsla(00, 80%, 21%, 1.00);
	--vintage-dark-75:	hsla(00, 80%, 21%, 0.75);
	--vintage-dark-50:	hsla(00, 80%, 21%, 0.50);
	--vintage-dark-25:	hsla(00, 80%, 21%, 0.25);

	/* Dark Palette */
	--dark-light:		hsla(262, 30%, 85%, 1);
	--dark-light-75:	hsla(262, 30%, 85%, 0.75);
	--dark-light-50:	hsla(262, 30%, 85%, 0.50);
	--dark-light-25:	hsla(262, 30%, 85%, 0.25);
	--dark-light-alt:	hsla(262, 30%, 80%, 1.00);

	--dark-300:			hsla(262, 30%, 16%, 1.00);
	--dark-300-50:		hsla(262, 50%, 16%, 1.00);
	--dark-400:			hsla(262, 50%, 12%, 1.00);
	--dark-500:			hsla(262, 50%, 08%, 1.00);
	--dark-800:			hsla(262, 50%, 02%, 1.00);

	--dark-dark:		hsla(262, 30%, 4%, 1.00);
	--dark-dark-75:		hsla(262, 30%, 4%, 0.75);
	--dark-dark-50:		hsla(262, 30%, 4%, 0.50);
	--dark-dark-25:		hsla(262, 30%, 4%, 0.25);

	/* Border Colors */
	--bor-color-light: 	hsla(0, 0%, 100%, 0.25);
	--bor-color-dark: 	hsla(0, 0%, 0%, 0.25);
	/* Box Shadow Colors */
	--box-shadow-color:	hsla(0, 0%, 0%, 0.125);
	--box-shadow-dark:	hsla(0, 0%, 0%, 0.5);
	/* Depreciated Border Colors */
	--chamfered-box-border: hsl(0, 0%, 0%);
	--chamfered-box-bg: hsl(7, 43%, 96%);
	--chamfered-box-bg-hover: hsl(0, 0%, 20%);

	/* Drop Shadows */
	--drop-default:
		0 0.125rem 3rem hsla(0, 0%, 5%, 0.08),
		0 0.125rem 1rem hsla(0, 0%, 5%, 0.08),
		0 0.125rem 0.25rem hsla(0, 0%, 5%, 0.08);
	--drop-sheet: 0 0 3rem hsla(0, 0%, 0%, 0.24);

	/* Border Radii */
	--brad-xs: 0.25rem;
	--brad-sm: 0.5rem;
	--brad-md: 0.75rem;
	--brad-lg: 1rem;
	--brad-xl: 1.5rem;

	/* Transitions */
	--trans-default: 		all ease-in-out 0.3s;
	--trans-default-delay: 	all ease-in-out 0.3s 0.3s;
	--trans-long: 			all ease-in-out 0.6s;

	/* Measurements */
	--header-height: 48px;
}
body {
	-webkit-text-size-adjust: 100%;
	with: 100%;
	height: 100%;
	margin: 0;
	font-size: 16px;
	/* FONTS EDITED IN type.css */
	color: var(--fore-primary);
	background-color: var(--back-primary);
}
body *, body *:before, body *:after {
	position: relative;
	box-sizing: border-box;
}


/* COLORS */
/* Dynamic Color Variables */
.color-primary {
	color: var(--fore-primary);
	fill: var(--fore-primary);
}
.color-secondary {
	color: var(--fore-secondary);
	fill: var(--fore-secondary);
}
.color-tertiary {
	color: var(--fore-tertiary);
	fill: var(--fore-tertiary);
}
/* Static Color Variables */
.color-purple {
	color: var(--purple-light);
	fill:  var(--purple-light);
}
.color-white {
	color: var(--color-white);
	fill:  var(--color-white);
}


/* Support Classes */
.invert {
	filter: invert(100%);
}
.nobr {
	display: inline-block;
}
.visually-hidden {
	user-select: none;
	pointer-events: none;
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	border: 0;
}
.underline {
	text-decoration: underline;
}

/* LISTS */
ul, ol {
	list-style: none;
	margin: 0;
	padding: 0;
}
.bullet-list {
	list-style: inside;
}
.link-list {
	display: flex;
	flex-direction: column;
	padding: 0.75rem 0;
}
.link-list + .link-list {
	border-top: 1px solid var(--bg-dark);
}
.link-list li{
	flex: 0 0 auto;
	width: 100%;
}
.link-list li .link, .link-list li a:not(.cta) {
	display: block;
	padding: 0.75rem 0.5rem;
	border-radius: var(--brad-sm);
}
.link-list li .cta {
	align-self: flex-start;
	display: inline-flex;
	margin: 0.625rem 0;
	background-color: var(--inv-bg);
	color: var(--inv-fg-prime);
}
.button-list {
	width: 100%;
	display: flex;
	padding: 1.5rem;
	flex-direction: column;
	align-items: stretch;
	gap: 0.75rem;
	align-self: stretch;
	border-radius: 0rem 0rem 0.75rem 0.75rem;
	background: var(--back-secondary);
}
.button-list li .cta {
	display: flex;
}
.social-list {
	display: flex;
	gap: 0.5rem;
	padding: 0 0.5rem;
}

/* LINKS & BUTTONS */
a {
	text-decoration: none;
	color: inherit;
}
button {
	cursor: pointer;
}
.cta {
	display: inline-flex;
	justify-content: center;
	align-items: center;
	height: 2.5rem;
	padding: 0rem 1rem 0rem 1rem;
	color: var(--fore-primary);
	font-family: "Archivo", sans-serif;
	font-optical-sizing: auto;
	font-size: 0.75rem;
	font-style: normal;
	font-weight: 700;
	font-variation-settings: "wdth" 120;
	letter-spacing: 0.0175rem;
	line-height: 1;
	text-align: center;
	text-transform: uppercase;
	background: var(--back-primary);
	border: 1px solid var(--bor-color-light);
	border-radius: 1.25rem;
	transition: var(--trans-default);
}
.cta.cta-icon {
	padding: 0rem 1rem 0rem 0.5rem;
}
.cta.cta-icon img {
	width: 2rem;
	height: 2rem;
	margin-right: 0.25rem;
}
/* Apply to <a> or override <button> with these */
.link {
	-webkit-appearance: none;
	height: auto;
	color: var(--fore-secondary);
	font-family: "Archivo", sans-serif;
	font-optical-sizing: auto;
	font-size: 1.125rem;
	font-style: normal;
	font-weight: 400;
	font-variation-settings: "wdth" 100;
	line-height: 1.125rem;
	background: none;
	border: none;
	transition: var(--trans-default);
}
.link-mono {
	-webkit-appearance: none;
	height: auto;
	color: inherit ;
	font-family: "SF Mono", ui-monospace, monospace;
	font-size: inherit;
	font-style: normal;
	text-decoration: underline;
	text-transform: uppercase;
	background: none;
	border: none;
	transition: var(--trans-default);
}
/* Button - OLD */
.button {
	-webkit-appearance: none;
	overflow: hidden;
	display: inline-flex;
	justify-content: center;
	align-items: center;
	height: 2rem;
	font-family: "Archivo", sans-serif;
	font-optical-sizing: auto;
	font-size: 0.875rem;
	font-style: normal;
	font-weight: 600;
	font-variation-settings: "wdth" 100;
	letter-spacing: 0.0175rem;
	line-height: 1.125;
	text-transform: uppercase;
	background: var(--bg);
	border: 1px solid transparent;
	border-radius: var(--brad-md);
	transition: var(--trans-default);
}
/* Square Buttons */
.button.button-icon-sm {
	flex: 0 0 auto;
	width: 2rem;
	height: 2rem;
	padding: 0;
}
.button.button-icon-md {
	flex: 0 0 auto;
	width: 2.5rem;
	height: 2.5rem;
	padding: 0;
}
.button.button-icon-lg {
	flex: 0 0 auto;
	width: 4rem;
	height: 4rem;
	padding: 0;
}
.button.button-round {
	border-radius: 100%;
}
.button.button-inv {
	background-color: var(--inv-bg);
}
.button.button-black {
	background-color: var(--black);
	border-color: #333;
}
/* Button Styles */
.button.button-trans {
	background-color: transparent;
	border-color: transparent;
}
.cta.cta-special {
	overflow: hidden;
	z-index: 1;
}
.cta.cta-special {
	/* background: red !important; */
}
.cta.cta-special:before {
	content: '';
	opacity: 0;
	z-index: -1;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: var(--bg-med);
	background: var(--blob1), var(--blob2), var(--tab-selected);
	background-size: 200% 200%;
	animation: blobsMovement 5s infinite linear;
	transition: var(--trans-default);
}
.cta.cta-inverted {
	color: var(--inv-fg-prime);
	background: var(--inv-bg);
	border: 1px solid var(--bg-dark);
}
.cta-big {
	height: 3rem;
	font-weight: 500;
	font-size: 0.875rem;
	border-radius: 1.5rem;
}
/* MAIN BESTIES CTA */
.cta-key {
	overflow: hidden;
	display: flex;
	color: var(--back-primary);
	background: var(--fore-primary);
	height: 4rem;
	border: 1px solid var(--back-primary);
	align-items: stretch;
	line-height: 1;
	transition: 0.3s ease-in-out border;
}
.cta-content {
	order: 10;
	flex: 0 0 auto;
	display: flex;
	flex-flow: column;
	justify-content: center;
	align-items: center;
	padding: 0 1rem;
	font-size: 1rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0em;
	transition: var(--trans-default);
	border-left: 1px solid var(--fore-primary);
}
.cta-content .headline {
	font-size: 0.875rem;
	letter-spacing: 0;
	transition: 0.3s ease-in-out letter-spacing;
}
.cta-content .tagline {
	margin-top: 0.25rem;
	font-size: 0.625rem;
	font-weight: 500;
	letter-spacing: 0.1em;
	opacity: 0.875;
	text-box: trim-end alphabetic;
	text-align: center;
}
.cta-content-price {
	flex: 1 0 auto;
	display: flex;
	flex-flow: column;
	gap: 0.125rem;
	align-items: flex-start;
	justify-content: center;
	padding: 0 0.625rem;
	font-size: 2rem;
	font-weight: 800;
	color: var(--fore-primary);
	background: var(--back-primary);
	transition: var(--trans-default);
}
.cta-content-price .priceline {
	width: 100%;
	display: flex;
	align-items: baseline;
}
.cta-content-price .priceline span {
	font-size: 1.5rem;
	font-weight: 400;
	color: var(--fore-tertiary);
	transition: 0.15s ease-in-out color;
}
.cta-content-price span.tagline {
	width: 100%;
	color: var(--fore-tertiary);
	font-size: 0.75rem;
	font-style: italic;
	font-weight: 500;
	text-align: left;
	transition: 0.15s ease-in-out color;
}

/* MEDIA */
img, svg, video {
	max-width: 100%;
	height: auto;
}

/* TYPOGRAPHY */
h1, .h1 {
	/* text-box: trim-start cap text; */
	margin: 1rem auto 0.375rem;
	font-size: 2.25rem;
	font-weight: 400;
	line-height: 1;
	letter-spacing: -0.025em;
}
h1.display, .h1.display {
	margin: 0 auto 0.5rem;
	font-size: clamp(1.25rem, 11.5vw, 8.25rem);
	letter-spacing: -0.025em;
	line-height: 1;
}
h2, .h2 {
	width: 100%;
	margin: 0.5rem auto;
	font-size: 1.5rem;
	font-weight: 700;
	letter-spacing: -0.025em;
	line-height: 1.125;
}
h3, .h3 {
	margin: 0.5rem auto;
	font-size: 2.5rem;
	font-weight: 400;
	letter-spacing: -0.025em;
	line-height: 0.875;
}
h4, .h4 {
	margin: 0.5rem auto 0.25rem;
	font-weight: 500;
	font-size: 0.875rem;
	text-transform: uppercase;
	letter-spacing: 0.075em;
}
small, .small {
	opacity: 0.75;
	font-size: 11px;
	line-height: 1.5;
	font-weight: 300;
	color: inherit;
}
.copy {
	margin: 0 auto;
	font-size: 1rem;
	font-weight: 300;
	line-height: 1.5;
}
.copy-lg {
	margin: 0 auto;
	font-size: 1.125rem;
	font-weight: 300;
	line-height: 1.5;
}
.copy-sm {
	margin: 0 auto;
	font-size: 0.875rem;
	text-box: trim-start cap;
}
.copy-display {
	font-size: clamp(1.25rem, 5vw, 3rem);
	line-height: 1.125;
}
h1.outline, .h1.outline {
	font-family: "Blunt Outline", sans-serif;
}
.text-center {
	text-align: center;
}
.copy-container {
	display: flex;
	flex-flow: column;
	align-items: center;
	justify-content: center;
}

/* PRIMITIVES */
/* Tag */
.tag {
	overflow: hidden;
	display: inline;
	padding: 0.375rem 0.5rem;
	color: var(--back-tertiary);
	font-size: 0.625rem;
	font-weight: 600;
	line-height: 1;
	text-box: trim-both cap alphabetic;
	background-color: var(--fore-secondary);
	/* border: 1px solic var(--bor-color-light); */
	border-radius: 0.375rem;
}
/* Message */
.message {
	display: flex;
	margin: 1.5rem auto 0.75rem;
	padding: 0.375rem 1rem 0.375rem 0.5rem;
	align-items: center;
	justify-content: center;
	gap: 0.625rem;
	font-size: 0.875rem;
	color: var(--fore-secondary);
	background: var(--back-secondary);
	border: 1px solid var(--bor-color-light);
	border-radius: 1rem;
}
.message img, .message svg {
	flex: 0 1 auto;
}
.message p {
	flex: 1 1 auto;
	margin: 0;
	padding: 0.375rem 0;
}

/* AUTOSCROLLING H2 */
h2.autoscroll-container .autoscroller {
	display: flex;
	align-items: center;
	overflow: hidden; /* add this here instead of inline */
}
h2.autoscroll-container .autoscroller span {
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 0.25em;
}
h2.autoscroll-container .autoscroller .autoscroller-content {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	width: max-content; /* critical */
	color: var(--fore-tertiary);
	font-size: 0.875rem;
	text-transform: uppercase;
	letter-spacing: 0.1em;
}
h2.autoscroll-container .autoscroller .autoscroller-content > * {
	flex: 0 0 auto;
}
h2.autoscroll-container .autoscroller .autoscroller-content span > * {
	width: clamp(1rem, 15vw, 4.5rem);
	height: clamp(1rem, 15vw, 4.5rem);
}
h2.autoscroll-container .autoscroller span.icon-sm > * {
	width: clamp(1rem, 15vw, 3rem);
	height: clamp(1rem, 15vw, 3rem);
}
h2.autoscroll-container .autoscroller span svg > * {
	fill: var(--dark-400);
}


/* ANIMATIONS */
@keyframes shimmer {
	0% {
		background-position: -200% 0;
	}
	50% {
		background-position: 300% 0;
	}
	100% {
		background-position: 300% 0;
	}
}
@keyframes spin {
	0% {
		transform: rotate(0deg);
	}
	25% {
		transform: rotate(359.99deg);
	}
	100% {
		transform: rotate(359.99deg);
	}
}
@keyframes spinrev {
	0% {
		transform: rotate(0deg);
	}
	25% {
		transform: rotate(-359.99deg);
	}
	100% {
		transform: rotate(-359.99deg);
	}
}
.shimmer-text {
	position: relative;
	color: inherit;
	-webkit-text-fill-color: transparent;
	-webkit-background-clip: text;
	background-clip: text;
	background-color: var(--fore-secondary);
	background-image: linear-gradient( 90deg,
		var(--fore-secondary) 33.333%,
		var(--color-white-50) 50%,
		var(--fore-secondary) 66.666%);
	background-size: 300% 100%;
	background-position: -200% 0;
	filter: brightness(105%) saturate(110%);
	animation: shimmer 12s linear infinite;
}
.tag.shimmer {
	isolation: isolate;
}
.tag.shimmer:after {
	content: '';
	z-index: 0;
	position: absolute;
	top: 1px;
	left: 1px;
	right: 1px;
	bottom: 1px;
	border-radius: calc(0.375rem + 0.5px);
	background-image: linear-gradient(120deg,
		transparent 33.333%,
		var(--color-white-50) 50%,
		transparent 66.666%);
	background-size: 300% 100%;
	background-position: -200% 0;
	mix-blend-mode: hard-light;
	animation: shimmer 12s linear infinite;
}
.spin {
	transform-box: fill-box;
	transform-origin: center;
	animation: spin 6s ease-in-out infinite;
}
.spinrev {
	transform-box: fill-box;
	transform-origin: center;
	animation: spinrev 6s 2s ease-in-out infinite;
}

/* Fade In - controlled by JS */
.fade-in > * {
	opacity: 0;
	transform: translateY(1rem);
	transition: opacity 0.9s 0.3s ease-in-out, transform 0.9s 0.3s ease-in-out;
	will-change: opacity, transform;
}
.fade-in > *.is-visible {
	opacity: 1;
	transform: translateY(0);
}


/* SITE HEADER */
#mainHeader {
	z-index: 3;
	overflow-y: auto;
	position: fixed;
	top: 1rem;
	left: 50%;
	width: calc(100vw - 2rem);
	max-width: 30rem;
	max-height: calc(100vh - 2rem);
	font-family: "SF Mono", ui-monospace, monospace;
	color: var(--fore-primary);
	background-color: var(--back-primary);
	border: 1px solid var(--bor-color-light);
	border-radius: var(--brad-lg);
	box-shadow: var(--drop-default);
	transform: translateX(-50%);
}
#mainHeader .h1 {
	margin: 0;
	font-family: "Archivo", sans-serif;
	font-optical-sizing: auto;
	font-size: 3rem;
	font-weight: 700;
	font-variation-settings: "wdth" 62;
	line-height: 1;
}
#mainHeader p {
	margin: 0;
}
/* Toolbar */
#toolbar {
	z-index: 1;
	top: 0;
	position: sticky;
	width: 100%;
	height: var(--header-height);
	min-height: 3rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
	color: var(--fore-primary);
	background-color: var(--back-primary);
	border-bottom: 1px solid transparent;
}
#toolbar .cta {
	font-size: 0.75rem;
	margin-right: 0.25rem;
	border-radius: 0.625rem;
	padding: 0 0.5rem;
	font-weight: 500;
	font-family: ui-monospace, monospace;
	background: var(--back-primary);
}
#menuButton {
	margin: 0 0 0 0.25rem;
	background: var(--back-primary);
	border-radius: var(--brad-md);
}
#menuButton img {
	filter: invert(100%);
}
#home {
	display: flex;
	align-items: center;
	justify-content: center;
	margin-right: auto;
	padding: 0.5rem;
	border-radius: var(--brad-xs);
	transform: translateX(-0.5rem);
	transition: var(--trans-default);
}
#home img {
	width: auto;
	height: 1.5rem;
	filter: invert(100%);
}
#toolbar p {
	margin: 0;
	padding: 0.75rem 0.75rem 0.75rem 0;
	color: var(--fore-primary);
	text-align: center;
	font-size: 0.75rem;
	font-style: normal;
	font-weight: 600;
	line-height: normal;
	text-decoration-line: underline;
	text-transform: uppercase;
}
#toolbar-right {
	flex: 0 1 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 4rem;
	min-width: 3rem;
	transition: var(--trans-default);
}
/* Header Nav */
#headerNav {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	overflow: auto;
	max-height: 0;
	transition: var(--trans-default);
}
#headerNav .link-list {
	width: calc(100% - 2rem);
	margin: 0 auto;
}
#headNavLocationLi #locationSelect {
	border: 1px solid var(--bor-color-light);
	border-radius: var(--brad-sm);
}
#headNavLocationLi #locationSelect:not(:only-child) {
	margin-top: 0.5rem;
}
#headNavLocationLi #locationSelect a, #headNavLocationLi #locationSelect a:first-child, #headNavLocationLi #locationSelect a:last-child {
	border-radius: var(--brad-xs);
}
/* Nav Open States */
.nav-open #headerNav {
	max-height: calc(100dvh - 2rem - var(--header-height));
}
#locationSelect {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	justify-content: flex-start;
	padding: 0.25rem;
	gap: 0.25rem;
}
#locationSelect a {
	overflow: hidden;
	flex: 1;
	display: flex;
	flex-flow: column;
	padding: 0.75rem;
	border: 1px solid var(--bor-color-light);
	border-radius: var(--brad-med);
	transition: var(--trans-default);
}
#locationSelect a:first-child {
	border-radius: var(--brad-xs) var(--brad-xs) var(--brad-xs) var(--brad-med);
}
#locationSelect a:last-child {
	border-radius: var(--brad-xs) var(--brad-xs) var(--brad-med) var(--brad-xs);
}
#locationSelect a.active {
	border: 1px solid var(--bor-color-light);
}


/* SITE FOOTER */
#mainFooter {
	z-index: 1;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	align-items: center;
	max-width: 100vw;
	color: var(--fore-primary);
	font-family: "SF Mono", ui-monospace, monospace;
	border-top: 1px solid var(--bor-color-light);
}
#mainFooter:before {
	content: '';
	z-index: -1;
	position: absolute;
	left: -20rem;
	top: -20rem;
	right: -20rem;
	bottom: -20rem;
	background: radial-gradient(30% 100% at 50% 33%, var(--cta-grad-1) 0%, var(--cta-grad-2));
	transform: rotate(-20deg);
}
#mainFooter > .card {
	margin: 1rem auto;
	padding: 0 1.5rem;
	text-align: center;
}
#mainFooter > .card h2 {
	font-family: "Archivo", sans-serif;
	font-optical-sizing: auto;
	font-size: 2rem;
	font-weight: 700;
	font-variation-settings: "wdth" 62;
	letter-spacing: 0;
	line-height: 1;
	text-transform: none;
}
#mainFooter > .card p {
	max-width: 32em;
	margin-bottom: 1rem;
}
#footerNav {
	align-self: stretch;
	padding: 0 0.75rem;
}
#footerNav .link-list li {
	align-self: flex-start;
	width: auto;
}
#footerNav .link-list img {
	height: 1.75rem;
	width: auto;
	filter: invert(100%);
}
#footerFinePrint {
	align-self: stretch;
	padding: 2rem 1rem 1rem;
}
#footerFinePrint a {
	color: var(--fore-tertiary);
	font-size: 12px;
}
#footerFinePrint ul {
	margin-bottom: 1rem;
}
#footerFinePrint small {
	display: block;
	color: var(--fore-tertiary);
	text-align: center;
}


/* MODALS */
.modal {
	display: none;
	width: 30rem;
	max-height: calc(100vh - 4rem);
	overflow-y: auto;
	max-width: calc(100% - 2rem);
	border-radius: 1rem;
	color: var(--fore-primary);
	border: 1px solid var(--bor-color-light);
	background: var(--back-primary);
	box-shadow: 0px 2px 32px 0px rgba(0, 0, 0, 0.08);
	font-family: "SF Mono", ui-monospace, monospace;
}
.modal.visible {
	display: block;
}
.modal > *:last-child {
	padding-bottom: 1.5rem;
}
.modal header {
	z-index: 2;
	position: sticky;
	top: 0;
	display: flex;
	padding: 1rem;
	align-items: center;
	justify-content: space-between;
	gap: var(--med, 0.75rem);
	background-color: var(--back-primary);
	border-bottom: 1px solid var(--bor-color-light);
}
.modal header h2 {
	font-family: "Archivo", sans-serif;
	font-optical-sizing: auto;
	font-size: 1.5rem;
	font-style: normal;
	font-weight: 700;
	font-variation-settings: "wdth" 120;
}
.modal > h3 {
	font-family: "Archivo", sans-serif;
	font-optical-sizing: auto;
	font-size: 1.5rem;
	font-style: normal;
	font-weight: 700;
	font-variation-settings: "wdth" 120;
	padding: 0.75rem 1rem;
	background: var(--inv-bg);
	text-align: center;
}
.modal .copy-container {
	padding: 1rem;
}
.modal .copy-container p {
	width: 100%;
}
.modal > picture {
	display: flex;
	align-items: center;
	justify-content: center;
	max-width: 100%;

}
.modal > picture.bbaa-modal-picture-bg {
	background-image: url(/bbaa/img/repeating-cloud-pattern-black.svg);
	background-size: 256px;
	border-bottom: 1px solid var(--fg-prime);
}
.modal img {
	max-width: 100%;
	width: 100%;
	height: auto;
}
#containerModal {
	z-index: 1000;
	pointer-events: none;
	opacity: 0;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	padding-top: 1rem;
	padding-bottom: 1rem;
	display: flex;
	flex-flow: column;
	align-items: center;
	justify-content: center;
	transition: var(--trans-default);
	backdrop-filter: blur(32px) brightness(50%);
}
#containerModal.visible {
	pointer-events: all;
	opacity: 1;
}

/* Responsive Desktop */
@media (min-width: 1024px) {
	/* Footer Styles */
	#mainFooter {
		flex-flow: row;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-between;
	}
	#mainFooter .autoscroll-container, #footerNav {
		order: -1;
	}
	#mainFooter  .autoscroll-container, #footerFinePrint {
		flex: 0 0 100%;
	}
	#mainFooter > .card {
		margin: 0 auto;
		transform: translateX(-5rem);
	}
	#footerNav {
		margin: 1rem 0;
		align-self: center;
	}
	#footerFinePrint {
		display: flex;
		align-items: baseline;
		justify-content: space-between;
	}
	#footerFinePrint ul {
		display: flex;
		gap: 1rem;
	}
}

/* Low Motion */
@media (prefers-reduced-motion: reduce) {
	.spins {
		animation: none;
	}
	.shimmer-text {
		animation: none;
		background-position: 50% 0;
	}
}

/* Hover States */
@media (hover: hover) {
	.cta:hover {
		background-color: var(--cta-grad-1);
	}
	.cta:active {
		background-color: var(--cta-grad-2);
	}
	.button:hover {
		background: var(--bg-med);
	}
	.button:active {
		background: var(--bg-dark);
	}

	/* Button Styles */
	.button.button-inv:hover {
		background-color: var(--inv-bg-med);
	}
	.button.button-on-bg-med:hover {
		background-color: var(--bg-med);
	}
	.button.button-on-bg-med:active {
		background-color: var(--bg-dark);
	}
	.cta.cta-special:hover {
		color: var(--white);
		text-shadow: 0 0 0.375rem rgba(0, 0, 0, 0.25);
		border: 1px solid var(--black);
		box-shadow: var(--drop-default);
	}
	.cta.cta-special:hover:before {
		opacity: 1;
	}
	.cta.cta-special:active {
		color: var(--white);
		text-shadow: 0 0 0 rgba(0, 0, 0, 0);
		opacity: 0.9;
	}
	.cta.cta-special:active:before {
		top: -50%;
		left: -50%;
		width: 200%;
		height: 200%;
	}
	.cta.cta-inverted:hover {
		color: var(--inv-fg-prime);
		background: var(--inv-bg-med);
		border: 1px solid var(--bg-dark);
	}
	.cta.cta-inverted:active {
		color: var(--inv-fg-prime);
		background: var(--inv-bg);
		border: 1px solid var(--bg);
	}
	.cta.cta-inverted.cta-special:hover {
		border-color: var(--fg-prime)
	}

	/* MAIN BESTIES CTA */
	.cta-key:hover {
		border: 1px solid var(--fore-primary);
	}
	.cta-key:hover .cta-content .headline {
		letter-spacing: 0.05em;
	}
	.cta-key:hover .cta-content-price .priceline span {
		color: var(--fore-secondary);
	}
	.cta-key:hover .cta-content-price span.tagline {
		color: var(--fore-secondary);
	}
	h3.header-strip.hs-link button.button-trans:hover {
		background-color: var(--fg-secondary);
	}

	/* LINK LIST */
	.link-list li .link:hover {
		background-color: var(--cta-grad-1);
	}
	.link-list li .link:active {
		background-color: var(--bg-dark);
	}
	.link-list li .cta:hover {
		background-color: var(--cta-grad-1);
	}

	/* SITE HEADER */
	#menuButton:hover {
		background: var(--cta-grad-1);
	}
	#home:hover, #toolbar-right:hover {
		background: var(--cta-grad-1);
	}
	#home:active, #toolbar-right:active {
		background: var(--bg-dark);
	}
	#locationSelect a:hover {
		background-color: var(--cta-grad-1);
	}
}