@charset "utf-8";


/* GLOBAL: INSTANTIATE
-------------------------------------------------------------------------------*/
@font-face {
	font-family: 'IBM Plex Sans';
	src: url('../fonts/IBMPlexSans-Variable-Regular.ttf') format('truetype');
	font-weight: 400 800;
	font-style: normal;
}
@font-face {
	font-family: 'IBM Plex Sans';
	src: url('../fonts/IBMPlexSans-Variable-Italic.ttf') format('truetype');
	font-weight: 400 800;
	font-style: italic;
}
@font-face {
	font-family: 'Jersey 10';
	src: url('../fonts/Jersey10-Regular.ttf') format('truetype');
	font-style: normal;
	size-adjust: 150%;
}

:root {
	--color-black:   #000000;
	--color-navy:    oklch(30% 32% 267deg);
	--color-blue:    oklch(51% 59% 263deg);
	--color-orange:  oklch(69% 52% 38deg);
	--color-gold:    oklch(86% 36% 86deg);
	--color-yellow:  oklch(86% 32% 88deg);
	--color-white:   #FFFFFF;
	--font-sans:     'IBM Plex Sans', Helvetica, Arial, sans-serif;
	--font-accent:   'Jersey 10', 'IBM Plex Sans', Helvetica, Arial, sans-serif;
	--weight-base:   400;
	--weight-bold:   700;
	--width-slim:    800px;
	--width-wide:    1500px;
	--radius-sm:     4px;
	--radius-md:     8px;
	--radius-lg:     40px;
	--radius-full:   999px;
	--spacing-sm:    12px; 
	--spacing-md:    clamp(12px, 2.5vw, 25px);
	--spacing-lg:    clamp(12px, 5vw, 50px);
	--spacing-xl:    clamp(12px, 7.5vw, 75px);
	--motion:        0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
  --font-spacing:  1%;
}

@media (prefers-reduced-motion: reduce) {
	* {
	  animation: none !important;
	  transition: none !important;
  }
}


/* GLOBAL: TYPOGRAPHY
-------------------------------------------------------------------------------*/
html {
	scroll-behavior: smooth;
	color: var(--color-white);
	background-color: var(--color-midnight);
	line-height: 1.4;
}
body {
	font-family: var(--font-sans);
	font-size: clamp(16.5px, 2vw, 18px);
	font-weight: var(--weight-base);
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: subpixel-antialiased;
	-moz-osx-font-smoothing: grayscale;
}
body, select, input, textarea {
	font-weight: var(--weight-base);
}
h1, h2, h3, h4, h5, h6 {
	font-weight: var(--weight-bold);
	line-height: 1.2;
	text-wrap: balance;
}
[class*="heading-"] {
	--_shadow: rgb(0 0 0 / 40%);
	font-family: var(--font-accent);
  font-size: clamp(2rem, 0.0208rem + 6.3333vw, 4.375rem);
	display: flex;
	flex-flow: column nowrap;
	text-align: center;
	text-transform: uppercase;
	letter-spacing: var(--font-spacing);
	text-shadow: -4px 6px 0px var(--_shadow);
	margin-block: unset;
	padding-block: var(--spacing-lg);
}
p {
	text-wrap: pretty;
	line-height: 1.5;
	orphans: 3;
	widows: 3;
}
strong {
	font-weight: 700;
}
small {
	font-size: 11px;
}
ul {
	--_size: 1.5ch;
	padding-inline-start: 1.5em;
	list-style: none;
}
ul.list-deco li {
	margin-block: 0.75em;
  text-indent: calc( var(--_size) * -2 );
}
ul.list-deco li::before {
	content: '';
	display: inline-block;
	height: var(--_size);
	width: var(--_size);
	vertical-align: middle;
	background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="18.83" height="14.123"><path fill="%231352eb" d="M4.707 14.123V0h2.354v14.123Zm2.354-1.177V1.177h2.354v11.769Zm2.354-1.177V2.354h2.354v9.415Zm2.354-1.177V3.53h2.354v7.062ZM-.001 10V4.116h4.707V10Zm14.123-.587V4.705h2.354v4.708Zm2.354-1.177V5.882h2.354v2.354Z" data-name="Path 244"/></svg>');
	background-size: contain;
	background-repeat: no-repeat;
	margin-right: var(--_size);
}
.list-reset {
	display: inline-flex;
	margin: 0;
	padding: 0;
	list-style: none;
}


/* GLOBAL: LINKS
-------------------------------------------------------------------------------*/
::-moz-selection {
	background: #b3d4fc;
	text-shadow: none;
}
::selection {
	background: #b3d4fc;
	text-shadow: none;
}
a:link,
a:visited,
a:active {
	color: var(--color-pink);
}
a:hover {
	text-decoration: underline;
}
::-moz-selection {
	background: rgba(242, 228, 212, 0.5);
	text-shadow: none;
}
::selection {
	background: rgba(242, 228, 212, 0.5);
	text-shadow: none;
}

.btn,
.btn:link,
.btn:hover,
.btn:focus,
.btn:visited {
	text-decoration: none;
}
.btn {
	--h: 58px;
	--n: 4px;
	--d: calc( var(--n) * 2);
	--i: calc( var(--n) * -1);
	--_shape: shape(
	from 0% var(--n),
	line to var(--n) var(--n),
	line to var(--n) 0%,
	line to calc(100% - var(--n)) 0%,
	line to calc(100% - var(--n)) var(--n),
	line to 100% var(--n),
	line to 100% calc(100% - var(--n)),
	line to calc(100% - var(--n)) calc(100% - var(--n)),
	line to calc(100% - var(--n)) 100%,
	line to var(--n) 100%,
	line to var(--n) calc(100% - var(--n)),
	line to 0% calc(100% - var(--n)),
	close
  );
	display: inline-block;
	position: relative;
	clip-path: var(--_shape);
	height: var(--h);
}
.btn::before {
	content: '';
	position: absolute;
	clip-path: var(--shape);
	z-index: 1;
	height: 100%;
	width: 100%;
	background: var(--color-black);
}
.btn span {
	position: relative;
	display: flex;
	place-items: center;
	justify-content: center;
	font-family: var(--font-accent);
	font-weight: var(--weight-base);
	font-size: 110%;
	line-height: .8;
	text-wrap: nowrap;
	cursor: pointer;
	transition: all var(--motion);
	background: var(--color-yellow);
	padding: var(--d) var(--spacing-md);
	z-index: 2 !important;
	inset: var(--n);
	width: calc(100% - var(--d));
	height: calc( var(--h) - var(--d) );
	clip-path: var(--_shape);
	box-shadow: 
		inset var(--n) var(--n) #FFF6,
		inset -4px -4px #0003;
}
.btn,
.btn:link,
.btn:visited {
	color: var(--color-black);
	text-decoration: none;
}
.btn:hover span {
	color: var(--color-orange);
	background-color: var(--color-white);
}
.btn:focus span {
	color: var(--color-white);
	background-color: var(--color-orange);
	border-color: var(--color-black);
}


/* GLOBAL: CONTAINERS
-------------------------------------------------------------------------------*/
body {
	background-color: var(--color-navy);
	overflow-x: hidden;
}
.container {
	display: flex;
	flex-flow: column;
	align-items: center;
	margin-inline: auto;
	width: 100%;
	max-width: var(--width-wide);
	padding: 3em clamp(8px, -14.5px + 4.5vw, 35px);
	gap: 1em;
	position: relative;
	z-index: 10;
	overflow: visible;
}

[class*="fade-"] {
	position: relative;
}
[class*="fade-"]::before,
[class*="fade-"]::after {
	content: '';
	display: block;
	position: absolute;
	width: 100%;
	height: 120px;
	left: 0;
}
.fade-footer::before {
	display: none;
}
.fade-footer::after {
	bottom: 0;
	background-image: 
		linear-gradient( 
			0deg,
			oklch(0% 0% 0deg / 0.75) 0%, 
			oklch(0% 0% 0deg / 0) 70% 
		);
}
.bg-top {
	background-image: radial-gradient(80% 50% at 50% 33%, #103FB4 0%, #11236D 100%);
}


/* SECTION: UTILITY
-------------------------------------------------------------------------------*/
.utility {
	--_ubg: #484848;
	--_utx: var(--color-white);
	--_sbg: var(--color-blue);
	--_stx: var(--color-white);
	--_utilHgt: 50px;
	width: 100%;
	display: flex;
	flex-flow: row nowrap;
	justify-content: flex-end;
	align-items: flex-start;
	position: absolute;
	z-index: 100;
}
.utility > div {
	display: flex;
	padding: var(--spacing-sm);
	gap: var(--spacing-sm);
}
.region-wrap {
	position: relative;
	width: 140px;
}
.region-select {
	position: absolute;
	z-index: 10;
	min-width: 100%;
	height: 100%;
	background-color: var(--_ubg);
	border: 4px solid var(--color-black);
	text-shadow: -2px 2px 0px var(--color-black);
}
.region-select summary::-webkit-details-marker {
	display: none;
}
.region-select summary,
.region-select a {
	cursor: pointer;
	display: flex;
	align-items: center;
	text-decoration: none;
	font-weight: 700;
	gap: 6px;
	color: var(--_utx);
}
.region-select summary {
	min-height: var(--_utilHgt);
	justify-content: center;
	font-family: inherit;
	font-size: 14px;
	transition:
		background-color var(--motion),
		border-color var(--motion),
		color var(--motion) !important;
}
.region-select ul {
	display: flex;
	flex-flow: column;
	background-color: var(--color-black);
	border: 4px solid var(--color-black);
	border-block-start: unset;
	margin-inline-start: -4px;
	width: 100%;
}
.region-select a {
	font-size: 12.5px;
	padding: 3px 12px;
}
.region-select li:last-of-type a {
	padding-block-end: 6px;
}
.region-select img {
	max-width: 18px;
}
.region-select nav:focus {
	outline: none;
}
.region-select summary:hover,
.region-select a:hover,
.region-select a:focus,
.region-select a:focus-within {
	transition: var(--transition);
	background-color: var(--_sbg);
	color: var(--_stx);
	text-shadow: -2px 2px 0px transparent;
}
.region-select [aria-hidden='true'] {
	display: none;
	visibility: none;
	pointer-events: none;
}

.btn-buy span {
	color: var(--color-white);
	background-color: var(--color-navy);
}


/* SECTION: HEADER
-------------------------------------------------------------------------------*/
.header {
	position: relative;
	display: grid;
	grid-template-rows: 5fr 2.5fr 1fr;
	grid-template-columns: 1fr clamp( 400px, 70vw, 800px ) 1fr;
	height: clamp( 400px, 70vw, 1100px );
	max-height: min(70vh, 1100px);
	gap: 0px;
}
.header::before {
	content: '';
	display: block;
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	z-index: 0;
	background-image: url('../images/texture-header.webp');
	background-size: cover;
	background-position: center;
	grid-area: 1 / 1 / -2 / -1;	
}
.header .container {
	display: grid;
	gap: inherit;
	grid-area: 1 / 1 / -1 / -1;	
	padding-block: unset;
	padding-inline: var(--spacing-md);
  grid-template-columns: subgrid;
  grid-template-rows: subgrid;
}
.header-hero {
	grid-area: 1 / 2 / 3 / 2;
	align-self: end;
}
.header-logo {
	grid-area: 2 / 2 / 4 / 2;
	width: 80%;
	margin-inline: auto;
}
@media (max-width: 860px) {
	.header {
		height: unset;
	}
  .header .container {
	grid-template-columns: unset;
	}
}


/* SECTION: ABOUT
-------------------------------------------------------------------------------*/
.about {
	padding-block-end: var(--spacing-lg);
}
.about-wrap {
	display: grid;
	gap: var(--spacing-md);
	align-items: start;
}
@media (min-width: 900px) {
	.about-wrap {
		grid-template-columns: 42% auto;
		grid-template-rows: auto auto;
	}
	.about-heading {
		grid-area: 1 / 1 / 2 / 3;
	}
	.about-description {
		grid-area: 2 / 1 / 2 / 2;
  }
  .about-trailer {
	  grid-area: 2 / 2 / 3 / 3;
	}
}
@media (min-width: 1400px) {
	.about-wrap {
		place-items: center;
	  gap: var(--spacing-sm) var(--spacing-lg);
	}
	.about-heading {
		grid-area: 1 / 1 / 2 / 2;
	}
  .about-trailer {
	  grid-area: 1 / 2 / 3 / 3;
	}
}

.about-heading {
	margin-block: unset;
  font-family: var(--font-accent);
  font-size: 150%;
	color: var(--color-gold);
	text-shadow: -2px 3px 0px var(--color-black); 
	font-weight: unset;
	letter-spacing: var(--font-spacing);
}
.about-description p:first-child {
	margin-block-start: unset;
}
.about-trailer {
	width: 100%;
	overflow: hidden;
	border-image-source: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Cpath d='M2 0 h4 v1 h-4 z M1 1 h1 v1 h-1 z M6 1 h1 v1 h-1 z M0 2 h1 v4 h-1 z M7 2 h1 v4 h-1 z M1 6 h1 v1 h-1 z M6 6 h1 v1 h-1 z M2 7 h4 v1 h-4 z' fill='%230B1B54'/%3E%3C/svg%3E") !important;
	margin: var(--spacing-sm);
	width: calc( 100% - ( var(--spacing-sm) * 2 ) );
}


/* SECTION: PURCHASE
-------------------------------------------------------------------------------*/
.products {
	background-image:
		url('../images/texture-products.webp'),
		linear-gradient(
		 180deg,
			#FF5D2400 0%,
			#FF5D2455 30%,
			#CE2E17 50%,
			#9C2D14 70%
		);
	background-position-y: top;
	background-size: contain;
	background-repeat: no-repeat;
	background-color: #CE2E17;
}
.products .container {
	padding-block-start: calc(var(--spacing-xl) * 2);
	padding-block-end: unset;
}
.products-grid {
	display: grid;
	grid-auto-rows: auto;
	gap: var(--spacing-md);
}
@media (min-width: 700px) {
	.products-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}
.products-card {
	display: grid;
	grid-template-rows: 140px auto 1fr;
}
.products-card::before,
.products-card::after {
	grid-area: 2 / 1 / 4 / 2;
	content: '';
	display: block;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	z-index: -1;
	background-image: linear-gradient(
		180deg,
		#070F2F,
		#11236D
	);
	border: 8px solid var(--color-black);
}
.products-card::before {
	background-color: var(--color-navy);
}
.products-image {
	grid-area: 1 / 1 / 3 / 2;
	padding-inline: 30px;
}
.products-image img {
	margin-inline: auto;
	padding: 0 var(--spacing-md);
	object-fit: contain;
}
.products-content {
	grid-area: 3 / 1 / 4 / 2;
	padding: clamp(35px, 18.33px + 3.33vw, 55px);
	padding-block-start: unset;
}
.products-content h3 {
	line-height: 1 !important;
	margin-block: 0 4px;
	margin-block-start: 0.5em;
	font-family: var(--font-accent);
	letter-spacing: var(--font-spacing);
	font-size: clamp(35px, 18.33px + 3.33vw, 42px);
	font-weight: var(--weight-base);
	text-shadow: -2px 3px 0px var(--color-black);
}
.products-content h3 + p,
.products-content strong {
	font-size: 1rem;
	font-weight: var(--weight-bold);
}
.products-content h3 + p {
	color: var(--color-gold);
}
.products-content strong {
	display: block;
	margin-bottom: 8px;
}
.products-content .list-deco {
	margin-block-end: var(--spacing-md);
}

/* WIDE */
.products-card-wide {
	margin-block-start: var(--spacing-lg);
}
.products-card-wide h3 {
	margin-top: 0.25em;
}
.products-card-wide img {
	margin-left: 2%;
	transform: translateY( calc( var(--spacing-lg) * -1 ) );
}
@media (min-width: 700px) {
	.products-card-wide {
		grid-area: 2 / 1 / 3 / 3;
		grid-template-rows: 1fr;
		grid-template-columns: 1fr 1fr;
		gap: 0;
	}
	.products-card-wide::before {
		grid-area: 2 / 1 / 4 / 3;
	}
	.products-card-wide::after {
		display: none;
	}
	.products-card-wide .products-content {
		grid-area: 2 / 3 / 4 / 2;
		padding-top: var(--spacing-lg);
		display: flex;
		flex-flow: column nowrap;
		justify-content: center;
		align-items: flex-start;
	}
	.products-card-wide .products-image {
		grid-area: 2 / 1 / 4 / 2;
		aspect-ratio: unset;
		display: grid;
		justify-content: center;
		align-content: center;
	}
	.products-card-wide .products-image,
	.products-card-wide .products-image img {
		padding: unset;
	}
}

/* TOGGLE */
.tabs {
	--_gap: 4px;
}
.tabs ul {
	margin-block: 0 1.5em;
	text-wrap: balance;
}
.tabs ul.list-reset {
	gap: var(--_gap);
	flex-flow: row wrap;
}
.tabs .tab-panel {
	margin-block: 0;
	gap: var(--_gap);
}
.tabs .active-tab {
	transition: all var(--motion);
}
.tabs .active-tab span {
	transition: all var(--motion);
	background-color: var(--color-orange);
	color: var(--color-white);
}
.tabs .active-tab::after {
	opacity: 1;
}
.tab-wrapper {
	display: grid;
}
.tab-wrapper .tab-panel {
	grid-area: 2 / 1;
	display: flex;
	opacity: 0;
	visibility: none;
	pointer-events: none;
}
.tab-wrapper .active-panel {
	opacity: 1;
	visibility: visible;
	pointer-events: all;
}



/* SECTION: QUOTES
-------------------------------------------------------------------------------*/
.quotes {
  padding-block-end: var(--spacing-xl);
	background-image:
		linear-gradient(
		 180deg,
			#9C2D14 0%,
			#5C0F0A 100%
	);
}
.quotes .container {
	display: grid;
	max-width: 1100px;
	gap: 1em;
}
.quotes blockquote,
.quotes blockquote * {
	margin: unset;
	padding: unset;
}
.quotes blockquote {
	background-image: 
		linear-gradient(
		 135deg,
			#F2BA3B 50%,
			#EA9740 80%,
			#E8B236 100%
	);
	max-width: 600px;
	border: 8px solid var(--color-black);
	text-align: center;
	text-wrap: balance;
	height: 100%;
	display: flex;
	flex-flow: column;
	justify-content: center;
	padding: 8px;
}
.quotes blockquote p {
	color: var(--color-black);
	font-weight: var(--weight-bold);
	line-height: 1.3;
	font-size: 1.5em;
	margin-block-end: 4px;
	padding-block: var(--spacing-md);
	padding-inline: clamp(20px, 5%, 40px);
}
.quotes blockquote cite {
	color: var(--color-beige);
	font-family: var(--font-accent);
	font-size: 1.5em;
	letter-spacing: var(--font-spacing);
	font-style: normal;
	background-color: var(--color-black);
	padding: var(--spacing-sm);
	margin-top: auto;
}

@media (min-width: 600px) {
	.quotes .container {
		display: grid;
		max-width: 1100px;
		grid-template-columns: repeat(4, 1fr);
		gap: 1em;
	}
	.quotes blockquote:nth-child(1) { 
		grid-area: 1 / 2 / 2 / 4;
	}
	.quotes blockquote:nth-child(2) { 
		grid-area: 2 / 1 / 3 / 3;
	}
	.quotes blockquote:nth-child(3) { 
		grid-area: 2 / 3 / 3 / 5;
	}
}

/* SECTION: FEATURES
-------------------------------------------------------------------------------*/
.features {
	position: relative;
	background-image: 
		url('../images/texture-zigzag.webp'),
		linear-gradient(
		  180deg,
			#11236D99 50%,
			#060C25 100%
		),
		url('../images/texture-features.webp');
	background-size: contain, auto, cover;
	background-position: top center;
	background-repeat: no-repeat;
	padding-block-start: calc( var(--spacing-xl) * 2 );
}
.heading-features {
	--_shadow: var(--color-blue);
}
.features .container {
	padding-block-start: var(--spacing-sm);
	padding-block-end: unset;
}
.features-grid {
	display: grid;
	gap: var(--spacing-xl);
}
@media (min-width: 860px) {
	.features-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}
.features figure {
	--_frame: 8px;
	display: grid;
	align-items: start;
	grid-template-rows: var(--_frame) auto var(--spacing-md) var(--_frame) 1fr;
	grid-template-columns: var(--_frame) 32px var(--_frame) auto var(--_frame);
	margin: unset;
}
.features figure img {
	width: 100%;
	grid-area: 2 / 2 / 3 / 5;
}
.features figure svg {
	grid-area: 4 / 1 / 4 / 5;
	width: 32px;
	height: 24px;
	position: relative;
	top: 20px;
	filter: drop-shadow( -2px 3px 0px black);
}
.features figcaption {
	grid-area: 4 / 4 / -1 / -2;
}
.features figcaption h3 {
	color: var(--color-gold);
	font-family: var(--font-accent);
	font-size: 2em;
	font-weight: 400;
	letter-spacing: var(--font-spacing);
	margin-block: var(--spacing-sm);
	position: relative;
	text-shadow: -2px 3px 0px var(--color-black);
}
.features figcaption h3 + p {
	margin-block-start: unset;
  text-wrap: balance;
}

.pixel-frame {
  --pixel-size: 8px;
  display: block;
  border-style: solid;
  border-width: var(--pixel-size);
  border-image-slice: 3;
  border-image-width: 3;
  border-image-repeat: stretch;
  border-image-outset: var(--pixel-size);
  border-image-source: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Cpath d='M2 0 h4 v1 h-4 z M1 1 h1 v1 h-1 z M6 1 h1 v1 h-1 z M0 2 h1 v4 h-1 z M7 2 h1 v4 h-1 z M1 6 h1 v1 h-1 z M6 6 h1 v1 h-1 z M2 7 h4 v1 h-4 z' fill='%23FBC953'/%3E%3C/svg%3E");
}


/* WRAPPER: BOTTOM
-------------------------------------------------------------------------------*/
.bg-bottom {
	background-image: 
		linear-gradient(
		  0deg,
			#00000099 5%,
			#00000000 15%
		),
		linear-gradient(
		  180deg,
			#060C25FF 240px,
			#060C2500 240px
		),
		url('../images/texture-footer.webp');
	background-size: cover;
	background-position: bottom, top, top 100px center;
	background-repeat: no-repeat;
}


/* SECTION: DEVELOPER
-------------------------------------------------------------------------------*/
.developer {
	display: grid;
	position: relative;
	z-index: 100;
	padding-block: var(--spacing-lg) var(--spacing-xl);
}
.developer-link {
	display: flex;
	flex-flow: column nowrap;
	margin-inline: auto;
	text-transform: uppercase;
	text-decoration: none !important;
	padding: var(--spacing-lg);
	gap: var(--spacing-md);
	max-width: min(20.852rem + 36.36vw, 610px);
	background-image: 
		radial-gradient(80% 50% at 50% 33%, 
			#11236D 0%,
			#0C318F66 30%,
			#11236D00 65%);
}
.developer-link span {
	font-family: var(--font-accent);
	text-align: center;
	text-wrap: none;
	line-height: 1.3;
	font-size: 1.5em;
	letter-spacing: var(--font-spacing);
	color: var(--color-white);
	transition: 
		filter var(--motion),
		color var(--motion);
	filter: 
		drop-shadow(0 1px 5px var(--color-black));
}

.developer-link:hover span {
	color: var(--color-white);
}
.developer-link:hover img {
	transform: scale(1.05);
}
.developer-link img {
	position: relative;
	transition: transform var(--motion);
}


/* SECTION: UPDATES
-------------------------------------------------------------------------------*/
.updates {
	--_abg: var(--color-gold);
	--_atx: var(--color-black);
	--_hbg: var(--color-orange);
	--_htx: var(--color-white);
}
.updates .container {
	padding-top: unset;
}
.updates-box {
	--_gap: 6px;
	display: flex;
	flex-flow: column nowrap;
	align-items: center;
	justify-content: center;
	max-width: var(--width-slim);
	width: 100%;
	margin-inline: auto;
	padding: var(--spacing-lg) var(--spacing-md);
	position: relative;
	z-index: 1;
	margin-bottom: 30px;
	background-color: var(--color-black);
	border-radius: var(--radius-md);
}
.updates-box h2 {
	color: var(--color-white);
	letter-spacing: unset;
	margin-block-start: unset;
	margin-block-end: 0.6em;
	font-weight: 500;
	text-align: center;
	text-shadow: 0 1px 3px #124D5A;
}
.updates-box h2 span {
	color: var(--color-orange);
}
.updates-row {
	display: flex;
	gap: 12px;
	justify-content: center;
	flex-flow: row wrap;
}
.updates-box ul {
	display: flex;
	flex-flow: row wrap;
	align-items: center;
	gap: var(--_gap);
}

/* LINKS */
.updates-box a {
	position: relative;
	background: var(--_abg);
	color: var(--_atx);
	display: flex;
	align-items: center;
	justify-content: center;
	height: 60px;
	width: 60px;
	border-radius: var(--radius-sm);
	transition: 
		background-color var(--motion),
		color var(--motion);
}
.updates-box svg {
	display: block;
	width: 24px;
	height: 24px;
	position: relative;
	z-index: 2;
	fill: var(--_atx);
}
.updates-box a:hover {
	background-color: var(--_hbg);
}
.updates-box a:hover svg {
	fill: var(--_htx);
}

/* KLAYVIO */
.updates form.klaviyo-form {
	max-width: 360px !important;
}
.updates form.klaviyo-form > div {
	display: grid !important;
	grid-template-columns: 1fr 140px;
	min-height: auto !important;
	border-radius: 8px !important;
	background: white !important;
	padding: 6px !important;
}
.updates .klaviyo-form div {
	padding: 0 !important;
}
.updates form.klaviyo-form input[type="email"],
.updates form.klaviyo-form button {
	height: 48px !important;
	box-sizing: border-box;
	border: 0px !important;
}
.updates form.klaviyo-form input[type="email"] {
	position: relative;
	font-family: var(--font-sans) !important;
	margin-right: 6px !important;
}
.updates form.klaviyo-form input[type="email"]:hover {
	border: 0 !important;
}
.updates form.klaviyo-form button {
	font-family: var(--font-accent) !important;
	font-size: 1.1em !important;
	letter-spacing: var(--font-spacing) !important;
	border-radius: var(--radius-sm) !important;
	background-color: var(--_abg) !important;
	color: var(--_atx) !important;
	text-shadow: -1px 1px 0px var(--color-white); 
	transition: 
		background-color var(--motion),
		color var(--motion),
		text-shadow var(--motion);
}
.updates form.klaviyo-form button:hover {
	box-shadow: unset !important;
	background: var(--_hbg) !important;
	color: var(--_htx) !important;
	text-shadow: -1px 1px 0px var(--color-blue); 
}
.updates form.klaviyo-form p {
	opacity: 0.7;
}
.updates form.klaviyo-form > div > div:last-child {
	display: none !important;
}


/* SECTION: FOOTER
-------------------------------------------------------------------------------*/
.footer .container {
	max-width: 100%;
	align-items: center;
	padding-block-end: var(--spacing-md);
	gap: var(--spacing-lg);
}
@media (min-width: 1100px) {
	.footer .container {
		display: flex;
		flex-flow: row nowrap;
		justify-content: space-between;
	}
	.footer small {
		text-align: right;
		text-wrap: balance;
	}
}
.footer small {
	display: block;
	max-width: 470px;
	opacity: 0.8;
}
.footer p {
	margin: 0;
	font-size: 10px;
	line-height: 1.2;
	font-weight: 550;	
	letter-spacing: var(--font-spacing);
}
.footer a {
	color: inherit;
}
.footer .logos {
	display: grid;
	grid-template-columns: repeat(3, auto);
	align-items: center;
	justify-content: center;
	gap: var(--spacing-lg);
}
.footer .logos img {
	max-width: 120px;
	object-fit: contain;
}
.footer .logos a:first-of-type img {
	max-width: 160px;
}
.footer-right {
	display: flex;
	gap: var(--spacing-md);
	align-items: center;
}
.footer-right img {
	max-height: 80px;
	max-width: 160px;
	object-fit: contain;
}