@font-face {
	font-family: GothamPro;
	src: url(../fonts/GothamPro.woff2) format('woff2'),
	url(../fonts/GothamPro.woff) format('woff');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: GothamPro;
	src: url(../fonts/GothamPro-Medium.woff2) format('woff2'),
	url(../fonts/GothamPro-Medium.woff) format('woff');
	font-weight: 600;
	/*font-weight: 500;*/
	font-style: normal;
	font-display: swap;
}

:root {
	--color-gold: #AE9A64;
	--color-black: #2C2C2C;
	--color-grey: #565656;
	--color-light-grey: #999999;
	--color-white: #ffffff;
	--color-red: #d23a3a;

	--font-family: GothamPro, "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
	--font-weight: 400;
	--bold-font-weight: 600;
	--font-size: 22px;
	--line-height: 1;

	--h1-spacing: -1.44px;

	--h1-size: 72px;
	--h2-size: 45px;
	--h3-size: 32px;
	--h4-size: 28px;
	--h5-size: 24px;
	--h6-size: 14px;

	--small-font-size: 14px;

	--spacing: 20px;
	--spacing-and-half: calc( var(--spacing) * 1.5 );
	--half-spacing: calc( var(--spacing) * 0.5 );
	--quarter-spacing: calc( var(--spacing) * 0.25 );
	--three-quarter-spacing: calc( var(--spacing) * 0.75 );
	--double-spacing: calc( var(--spacing) * 2 );
	--triple-spacing: calc( var(--spacing) * 3 );
	--quad-spacing: calc( var(--spacing) * 4 );

	--ease-inout-cubic: cubic-bezier(0.645, 0.045, 0.355, 1);

	--transition-duration: 0.4s;
	--transition-duration-slow: 0.8s;
	--transition-ease: var(--ease-inout-cubic);
	--transition: var(--transition-duration) var(--transition-ease);
	--transition-slow: var(--transition-duration-slow) var(--transition-ease);
}
@media screen and (max-width: 679px) {
	:root {
		--font-size: 17px;

		--h1-spacing: -1px;

		--h1-size: 44px;
		--h2-size: 34px;
		--h3-size: 28px;
		--h4-size: 24px;
		--h5-size: 19px;
		--h6-size: 14px;

		--small-font-size: 12px;
	}
}

.sr {
	border: 0 !important;
	clip: rect(0 0 0 0) !important;
	height: 1px !important;
	margin: -1px !important;
	overflow: hidden !important;
	padding: 0 !important;
	position: absolute !important;
	width: 1px !important;
}

html, body {
	padding: 0;
	margin: 0;
}

body {
	background-color: var(--color-white);

	font-family: var(--font-family);
	font-size: var(--font-size);
	line-height: var(--line-height);
	font-weight: var(--font-weight);
	color: var(--color-black);

	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}


strong, b {
	font-weight: var(--bold-font-weight);
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
	font-family: var(--font-family);
	line-height: var(--line-height);
	font-weight: var(--font-weight);
	color: var(--color-black);
}
h2, h3, h4, h5, h6,
.h2, .h3, .h4, .h5, .h6 {
	letter-spacing: normal;
}
h1, .h1 {
	font-size: var(--h1-size);
	letter-spacing: var(--h1-spacing);
	line-height: 1.3;
}
h2, .h2 {
	font-size: var(--h2-size);
}
h3, .h3 {
	font-size: var(--h3-size);
}
h4, .h4 {
	font-size: var(--h4-size);
}
h5, .h5 {
	font-size: var(--h5-size);
}
h6, .h6 {
	font-size: var(--h6-size);
	font-weight: var(--bold-font-weight);
	text-transform: uppercase;
}

p,
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
figure {
	margin: 0;
}

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

.text-center {
	text-align: center;
}
@media screen and (min-width: 1080px) {
	.large-text-center {
		text-align: center;
	}
}
@media screen and (min-width: 680px) and (max-width: 1079px) {
	.medium-text-center {
		text-align: center;
	}
}
@media screen and (max-width: 679px) {
	.small-text-center {
		text-align: center;
	}
}


body > .spinner {
	position: fixed;
	z-index: 999;
	width: 100px;
	height: auto;
	aspect-ratio: 1 / 1;
	left: 50vw;
	top: 50vh;
	transform: translate(-50%, -50%);
	pointer-events: none;
	transition: opacity 0.3s;
}
html:not(.is-loading) body > .spinner {
	opacity: 0;
}

html.overlay-open .page-wrap {
	pointer-events: none;
}

.wrap {
	width: 1080px;
	max-width: 100%;
	margin: 0 auto;
	padding-inline: var(--double-spacing);
}
.wrap.wrap--small {
	width: 900px;
}
.wrap.wrap--smallest {
	width: 640px;
}
.wrap.wrap--hard {
	padding-inline: 0;
}

.abs-center {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
}

.page-wrap {
	transition: opacity var(--transition);
}

.page-content {
	position: relative;
	z-index: 2;
	margin-top: -100vh;
	padding-top: 300vh;
	transition: opacity var(--transition);
	pointer-events: none;
}

.page-content__inner {
	position: relative;
	padding-bottom: var(--double-spacing);
	pointer-events: all;
}

.fade-in {
	opacity: 0;
	transition: opacity var(--transition);
}
.fade-in.reveal {
	opacity: 1;
}

.fade-up {
	opacity: 0;
	transform: translateY( var(--spacing-and-half) );
	transition: opacity var(--transition-slow), transform var(--transition-slow);
}
.fade-up.reveal {
	opacity: 1;
	transform: translateY(0);
}

.lines-in {
	opacity: 0;
}
.lines-in,
.lines-in * {
	will-change: transform;
}


.vh {
	height: 100vh;
}
.vh-min {
	min-height: 100vh;
}
.vh-third {
	height: 33vh;
}
.vh-half {
	height: 50vh;
}
@media screen and (min-width: 1080px) {
	.large-vh {
		height: 100vh;
	}
	.large-vh-min {
		min-height: 100vh;
	}
	.large-vh-third {
		height: 33vh;
	}
	.large-vh-half {
		height: 50vh;
	}
}
@media screen and (min-width: 680px) and (max-width: 1079px) {
	.medium-vh {
		height: 100vh;
	}
	.medium-vh-min {
		min-height: 100vh;
	}
	.medium-vh-third {
		height: 33vh;
	}
	.medium-vh-half {
		height: 50vh;
	}
}
@media screen and (min-width: 679px) {
	.small-vh {
		height: 100vh;
	}
	.small-vh-min {
		min-height: 100vh;
	}
	.small-vh-third {
		height: 33vh;
	}
	.small-vh-half {
		height: 50vh;
	}
}

.v-pad {
	padding-block: var(--spacing);
}
.v-pad-quarter {
	padding-block: var(--quarter-spacing);
}
.v-pad-half {
	padding-block: var(--half-spacing);
}
.v-pad-double {
	padding-block: var(--double-spacing);
}
.v-pad-triple {
	padding-block: var(--triple-spacing);
}
.v-pad-quad {
	padding-block: var(--quad-spacing);
}
@media screen and (min-width: 1080px) {
	.large-v-pad {
		padding-block: var(--spacing);
	}
	.large-v-pad-quarter {
		padding-block: var(--quarter-spacing);
	}
	.large-v-pad-half {
		padding-block: var(--half-spacing);
	}
	.large-v-pad-double {
		padding-block: var(--double-spacing);
	}
	.large-v-pad-triple {
		padding-block: var(--triple-spacing);
	}
	.large-v-pad-quad {
		padding-block: var(--quad-spacing);
	}
}
@media screen and (min-width: 680px) and (max-width: 1079px) {
	.medium-v-pad {
		padding-block: var(--spacing);
	}
	.medium-v-pad-quarter {
		padding-block: var(--quarter-spacing);
	}
	.medium-v-pad-half {
		padding-block: var(--half-spacing);
	}
	.medium-v-pad-double {
		padding-block: var(--double-spacing);
	}
	.medium-v-pad-triple {
		padding-block: var(--triple-spacing);
	}
	.medium-v-pad-quad {
		padding-block: var(--quad-spacing);
	}
}
@media screen and (max-width: 679px) {
	.small-v-pad {
		padding-block: var(--spacing);
	}
	.small-v-pad-quarter {
		padding-block: var(--quarter-spacing);
	}
	.small-v-pad-half {
		padding-block: var(--half-spacing);
	}
	.small-v-pad-double {
		padding-block: var(--double-spacing);
	}
	.small-v-pad-triple {
		padding-block: var(--triple-spacing);
	}
	.small-v-pad-quad {
		padding-block: var(--quad-spacing);
	}
}

.pad {
	padding: var(--spacing);
}
.pad-quarter {
	padding: var(--quarter-spacing);
}
.pad-half {
	padding: var(--half-spacing);
}
.pad-double {
	padding: var(--double-spacing);
}
.pad-triple {
	padding: var(--triple-spacing);
}
.pad-quad {
	padding: var(--quad-spacing);
}
@media screen and (min-width: 1080px) {
	.large-pad {
		padding: var(--spacing);
	}
	.large-pad-quarter {
		padding: var(--quarter-spacing);
	}
	.large-pad-half {
		padding: var(--half-spacing);
	}
	.large-pad-double {
		padding: var(--double-spacing);
	}
	.large-pad-triple {
		padding: var(--triple-spacing);
	}
	.large-pad-quad {
		padding: var(--quad-spacing);
	}
}
@media screen and (min-width: 680px) and (max-width: 1079px) {
	.medium-pad {
		padding: var(--spacing);
	}
	.medium-pad-quarter {
		padding: var(--quarter-spacing);
	}
	.medium-pad-half {
		padding: var(--half-spacing);
	}
	.medium-pad-double {
		padding: var(--double-spacing);
	}
	.medium-pad-triple {
		padding: var(--triple-spacing);
	}
	.medium-pad-quad {
		padding: var(--quad-spacing);
	}
}
@media screen and (max-width: 679px) {
	.small-pad {
		padding: var(--spacing);
	}
	.small-pad-quarter {
		padding: var(--quarter-spacing);
	}
	.small-pad-half {
		padding: var(--half-spacing);
	}
	.small-pad-double {
		padding: var(--double-spacing);
	}
	.small-pad-triple {
		padding: var(--triple-spacing);
	}
	.small-pad-quad {
		padding: var(--quad-spacing);
	}
}

.push-bottom {
	margin-bottom: var(--spacing);
}
.push-bottom-quarter {
	margin-bottom: var(--quarter-spacing);
}
.push-bottom-half {
	margin-bottom: var(--half-spacing);
}
.push-bottom-double {
	margin-bottom: var(--double-spacing);
}
.push-bottom-triple {
	margin-bottom: var(--triple-spacing);
}
.push-bottom-quad {
	margin-bottom: var(--quad-spacing);
}
@media screen and (min-width: 1080px) {
	.push-bottom {
		margin-bottom: var(--spacing);
	}
	.push-bottom-quarter {
		margin-bottom: var(--quarter-spacing);
	}
	.push-bottom-half {
		margin-bottom: var(--half-spacing);
	}
	.push-bottom-double {
		margin-bottom: var(--double-spacing);
	}
	.push-bottom-triple {
		margin-bottom: var(--triple-spacing);
	}
	.push-bottom-quad {
		margin-bottom: var(--quad-spacing);
	}
}
@media screen and (min-width: 680px) and (max-width: 1079px) {
	.medium-push-bottom {
		margin-bottom: var(--spacing);
	}
	.medium-push-bottom-quarter {
		margin-bottom: var(--quarter-spacing);
	}
	.medium-push-bottom-half {
		margin-bottom: var(--half-spacing);
	}
	.medium-push-bottom-double {
		margin-bottom: var(--double-spacing);
	}
	.medium-push-bottom-triple {
		margin-bottom: var(--triple-spacing);
	}
	.medium-push-bottom-quad {
		margin-bottom: var(--quad-spacing);
	}
}
@media screen and (max-width: 679px) {
	.small-push-bottom {
		margin-bottom: var(--spacing);
	}
	.small-push-bottom-quarter {
		margin-bottom: var(--quarter-spacing);
	}
	.small-push-bottom-half {
		margin-bottom: var(--half-spacing);
	}
	.small-push-bottom-double {
		margin-bottom: var(--double-spacing);
	}
	.small-push-bottom-triple {
		margin-bottom: var(--triple-spacing);
	}
	.small-push-bottom-quad {
		margin-bottom: var(--quad-spacing);
	}
}

.full-width {
	width: 100%;
}
@media screen and (min-width: 1080px) {
	.large-full-width {
		width: 100%;
	}
}
@media screen and (min-width: 680px) and (max-width: 1079px) {
	.medium-full-width {
		width: 100%;
	}
}
@media screen and (max-width: 679px) {
	.small-full-width {
		width: 100%;
	}
}


.flex-col {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-start;
}
.flex-col.flex-stretch {
	align-items: stretch;
}

@media screen and (min-width: 1080px) {
	.large-flex-col {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		justify-content: flex-start;
	}
	.large-flex-col.large-flex-stretch,
	.flex-col.large-flex-stretch,
	.large-flex-col.flex-stretch {
		align-items: stretch;
	}
}
@media screen and (min-width: 680px) and (max-width: 1079px) {
	.medium-flex-col {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		justify-content: flex-start;
	}
	.medium-flex-col.medium-flex-stretch,
	.flex-col.medium-flex-stretch,
	.medium-flex-col.flex-stretch {
		align-items: stretch;
	}
}
@media screen and (max-width: 679px) {
	.small-flex-col {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		justify-content: flex-start;
	}
	.small-flex-col.small-flex-stretch,
	.flex-col.small-flex-stretch,
	.small-flex-col.flex-stretch {
		align-items: stretch;
	}
}

.flex-row {
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	justify-content: flex-start;
}
.flex-row.flex-stretch {
	justify-content: stretch;
}
@media screen and (min-width: 1080px) {
	.large-flex-row {
		display: flex;
		flex-direction: row;
		align-items: flex-start;
		justify-content: flex-start;
	}
	.large-flex-row.large-flex-stretch,
	.flex-row.large-flex-stretch,
	.large-flex-row.flex-stretch {
		justify-content: stretch;
	}
}
@media screen and (min-width: 680px) and (max-width: 1079px) {
	.medium-flex-row {
		display: flex;
		flex-direction: row;
		align-items: flex-start;
		justify-content: flex-start;
	}
	.medium-flex-row.medium-flex-stretch,
	.flex-row.medium-flex-stretch,
	.medium-flex-row.flex-stretch {
		justify-content: stretch;
	}
}
@media screen and (max-width: 679px) {
	.small-flex-row {
		display: flex;
		flex-direction: row;
		align-items: flex-start;
		justify-content: flex-start;
	}
	.small-flex-row.small-flex-stretch,
	.flex-row.small-flex-stretch,
	.small-flex-row.flex-stretch {
		justify-content: stretch;
	}
}

.flex-centered {
	align-items: center;
	justify-content: center;
}
@media screen and (min-width: 1080px) {
	.large-flex-centered {
		align-items: center;
		justify-content: center;
	}
}
@media screen and (min-width: 680px) and (max-width: 1079px) {
	.medium-flex-centered {
		align-items: center;
		justify-content: center;
	}
}
@media screen and (max-width: 679px) {
	.small-flex-centered {
		align-items: center;
		justify-content: center;
	}
}

.flex-spaced {
	align-items: center;
	justify-content: space-between;
}
@media screen and (min-width: 1080px) {
	.large-flex-spaced {
		align-items: center;
		justify-content: space-between;
	}
}
@media screen and (min-width: 680px) and (max-width: 1079px) {
	.medium-flex-spaced {
		align-items: center;
		justify-content: space-between;
	}
}
@media screen and (max-width: 679px) {
	.small-flex-spaced {
		align-items: center;
		justify-content: space-between;
	}
}

.flex-gap {
	gap: var(--spacing);
}
.flex-gap-quarter {
	gap: var(--quarter-spacing);
}
.flex-gap-half {
	gap: var(--half-spacing);
}
.flex-gap-double {
	gap: var(--double-spacing);
}
.flex-gap-triple {
	gap: var(--triple-spacing);
}
.flex-gap-quad {
	gap: var(--quad-spacing);
}
@media screen and (min-width: 1080px) {
	.large-flex-gap {
		gap: var(--spacing);
	}
	.large-flex-gap-quarter {
		gap: var(--quarter-spacing);
	}
	.large-flex-gap-half {
		gap: var(--half-spacing);
	}
	.large-flex-gap-double {
		gap: var(--double-spacing);
	}
	.large-flex-gap-triple {
		gap: var(--triple-spacing);
	}
	.large-flex-gap-quad {
		gap: var(--quad-spacing);
	}
}
@media screen and (min-width: 680px) and (max-width: 1079px) {
	.medium-flex-gap {
		gap: var(--spacing);
	}
	.medium-flex-gap-quarter {
		gap: var(--quarter-spacing);
	}
	.medium-flex-gap-half {
		gap: var(--half-spacing);
	}
	.medium-flex-gap-double {
		gap: var(--double-spacing);
	}
	.medium-flex-gap-triple {
		gap: var(--triple-spacing);
	}
	.medium-flex-gap-quad {
		gap: var(--quad-spacing);
	}
}
@media screen and (max-width: 679px) {
	.small-flex-gap {
		gap: var(--spacing);
	}
	.small-flex-gap-quarter {
		gap: var(--quarter-spacing);
	}
	.small-flex-gap-half {
		gap: var(--half-spacing);
	}
	.small-flex-gap-double {
		gap: var(--double-spacing);
	}
	.small-flex-gap-triple {
		gap: var(--triple-spacing);
	}
	.small-flex-gap-quad {
		gap: var(--quad-spacing);
	}
}


.grid {
	width: 100%;
	display: grid;
	grid-template-columns: repeat(var(--columns, auto-fit), minmax(0, 1fr));
	column-gap: var(--col-gap, 0);
	row-gap: var(--row-gap, 0);
}
.grid.gap {
	--col-gap: var(--spacing);
	--row-gap: var(--spacing);
}

.grid--1 {
	--columns: 1;
}
.grid--2 {
	--columns: 2;
}
.grid--3 {
	--columns: 3;
}

@media screen and (min-width: 1080px) {
	.large-grid--auto {
		--columns: auto-fit;
	}
	.large-grid--1 {
		--columns: 1;
	}
	.large-grid--2 {
		--columns: 2;
	}
	.large-grid--3 {
		--columns: 3
	}
}
@media screen and (min-width: 680px) and (max-width: 1079px) {
	.medium-grid--auto {
		--columns: auto-fit;
	}
	.medium-grid--1 {
		--columns: 1;
	}
	.medium-grid--2 {
		--columns: 2;
	}
	.medium-grid--3 {
		--columns: 3;
	}
}
@media screen and (max-width: 679px) {
	.small-grid--auto {
		--columns: auto-fit;
	}
	.small-grid--1 {
		--columns: 1;
	}
	.small-grid--2 {
		--columns: 2;
	}
	.small-grid--3 {
		--columns: 3;
	}
}

.color-gold {
	color: var(--color-gold);
}
.color-black {
	color: var(--color-black);
}
.color-grey {
	color: var(--color-grey);
}
.color-white {
	color: var(--color-white);
}

.bg-gold,
.icon-color--gold {
	background-color: var(--color-gold);
}
.bg-black,
.icon-color--black {
	background-color: var(--color-black);
}
.bg-grey,
.icon-color--grey {
	background-color: var(--color-grey);
}
.bg-white,
.icon-color--white {
	background-color: var(--color-white);
}

.border {
	border: 1px solid var(--color-gold);
}
.border-top {
	border-top: 1px solid var(--color-gold);
}
.border-bottom {
	border-bottom: 1px solid var(--color-gold);
}
.border-block {
	border-block: 1px solid var(--color-gold);
}
.border-inline {
	border-inline: 1px solid var(--color-gold);
}
.border-right {
	border-right: 1px solid var(--color-gold);
}
.border-left {
	border-right: 1px solid var(--color-gold);
}

a:not([class]) {
	text-decoration: underline;
	color: var(--color-black);
	transition: color var(--transition);
}
a:not([class]):hover {
	color: var(--color-gold);
}
a[href^="tel:"] {
	text-decoration: none;
}

.icon {
	display: inline-block;
	overflow: hidden;
	padding: 0;
	line-height: 0;
	font-size: 0;
	text-indent: -9999px;

	width: var(--icon-size, 20px);
	height: auto;
	aspect-ratio: var(--icon-ar, 1 / 1);
	mask-size: contain;
	mask-position: center;
	mask-repeat: no-repeat;
	background-color: var(--icon-color, var(--color-gold));
	transition: background-color var(--transition);

	mask-image: var(--icon);
	-webkit-mask-image: var(--icon);
}

.icon--plan {
	--icon: url(../images/icons/custom-plan.svg);
}
.icon--arrow {
	--icon: url(../images/icons/custom-arrow.svg);
}
.icon--close {
	--icon: url(../images/icons/close.svg);
}
.icon--facebook {
	--icon: url(../images/icons/facebook-circle-fill.svg);
}
.icon--houzz {
	--icon: url(../images/icons/houzz.svg);
}
.icon--instagram {
	--icon: url(../images/icons/instagram-line.svg);
}
.icon--x {
	--icon: url(../images/icons/twitter-x-line.svg);
}
.icon--youtube {
	--icon: url(../images/icons/youtube-fill.svg);
}
.icon--logo-symbol {
	--icon-size: 70px;
	--icon-color: var(--color-white);
	--icon: url(../images/wmw-logo-symbol.svg);
}


.icon-xl {
	--icon-size: 440px;
	max-width: 31vw;
}
.icon.abs-center {
	z-index: 1;
}


.icon-box {
	background: var(--color-gold);
	aspect-ratio: 1 / 1;
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: var(--half-spacing);
	width: max-content;
}
.icon-box svg {
	width: var(--icon-size);
}
.icon-box {
	--icon-size: 70px;
}

.scroll-to-top {
	cursor: pointer;
	position: fixed;
	left: 50%;
	top: 0;
	transform: translateX(-50%);
	z-index: 99;
}
html.overlay-open .scroll-to-top {
	pointer-events: none;
}

@media screen and (max-width: 679px) {
	.scroll-to-top {
		--icon-size: 50px;
	}
}

.button {
	border-inline: 1px solid var(--color-gold);
	border-block: 1px solid var(--color-black);
	background: var(--color-gold);
	color: var(--color-white);
	font-size: var(--small-font-size);
	font-weight: var(--bold-font-weight);
	text-transform: uppercase;
	height: 56px;
	padding: 15px var(--spacing-and-half);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-wrap: nowrap;
	border-radius: 0;
	text-decoration: none;
	cursor: pointer;
	position: relative;
	transition: border-color var(--transition), color var(--transition);

	flex-shrink: 0;
}
.button span {
	position: relative;
}
.button:before {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 0;
	height: 100%;
	background-color: var(--color-white);
	transition: width var(--transition);
	z-index: 0;
}
.button:not([disabled]):hover,
.button:not(.disabled):hover {
	color: var(--color-gold);
	border-color: var(--color-gold);
}
.button:not([disabled]):hover:before,
.button:not(.disabled):hover:before {
	width: 100%;
}
.button[disabled],
.button.disabled {
	pointer-events: none;
	background-color: var(--color-white);
	border-color: var(--color-light-grey);
	color: var(--color-light-grey);
}

.icon-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: auto;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	border-radius: 50%;
	cursor: pointer;
	border: 1px solid var(--color-gold);
	background: transparent;
	transition: background-color var(--transition);
}
.icon-button:not([disabled]):hover,
.icon-button:not(.disabled):hover {
	background-color: var(--color-gold);
}
.icon-button:not([disabled]):hover .icon,
.icon-button:not(.disabled):hover .icon {
	background-color: var(--color-white);
}
.button[disabled],
.button.disabled {
	pointer-events: none;
	background-color: var(--color-white);
	border-color: var(--color-light-grey);
}
.button[disabled] .icon,
.button.disabled .icon {
	background-color: var(--color-light-grey);
}

.nav {
	list-style: none;
	margin: 0;
	padding: 0;
	width: max-content;
	max-width: 100%;
	display: flex;
	align-items: center;
	gap: var(--spacing);
}
.nav, .nav li {
	margin-bottom: 0;
}
.nav > li,
.nav > li > a {
	zoom: 1;
}

.nav-left {
	justify-content: flex-start;
}
.nav-center {
	justify-content: center;
}
.nav-right {
	justify-content: flex-end;
}
@media screen and (min-width: 1080px) {
	.large-nav-left {
		justify-content: flex-start;
	}
	.large-nav-center {
		justify-content: center;
	}
	.large-nav-right {
		justify-content: flex-end;
	}
}
@media screen and (min-width: 680px) and (max-width: 1079px) {
	.medium-nav-left {
		justify-content: flex-start;
	}
	.medium-nav-center {
		justify-content: center;
	}
	.medium-nav-right {
		justify-content: flex-end;
	}
}
@media screen and (max-width: 679px) {
	.small-nav-left {
		justify-content: flex-start;
	}
	.small-nav-center {
		justify-content: center;
	}
	.small-nav-right {
		justify-content: flex-end;
	}
}

.hide {
	display: none !important;
}
@media screen and (min-width: 1080px) {
	.large-hide {
		display: none !important;
	}
}
@media screen and (min-width: 680px) and (max-width: 1079px) {
	.medium-hide {
		display: none !important;
	}
}
@media screen and (max-width: 679px) {
	.small-hide {
		display: none !important;
	}
}


.hero {
	position: relative;
	overflow: hidden;
	transition: opacity var(--transition);
}
.hero picture,
.hero img {
	position: absolute;
	display: block;
	width: 100%;
	height: 100%;
	inset: 0;
}
.hero img {
	object-fit: cover;
	object-position: center;
	transform-origin: 50% 50%;
	transform: scale(2.5);
	will-change: transform;
	aspect-ratio: 1 / 0.6666666667;
}

.header {
	position: relative;
	z-index: 1;
}

[class*="fade-"] ~ [class*="fade-"] {
	transition-delay: var(--transition-duration);
}
[class*="fade-"] ~ [class*="fade-"] ~ [class*="fade-"] {
	transition-delay: var(--transition-duration-slow);
}

.metrics {
	margin-bottom: min(320px, 25vh);
}

.metrics figure img {
	height: 92px;
	object-fit: scale-down;
}


.showcase {
	position: relative;
	overflow: hidden;
}
.showcase__inner {
	position: relative;
	overflow: hidden;

	display: flex;
	flex-direction: column;
	justify-content: center;
}
.showcase__track {
	display: flex;
	flex-wrap: nowrap;
	align-items: stretch;
	gap: var(--spacing);
	width: max-content;
	will-change: transform;
}
.showcase .content {
	flex: 0 0 28rem; /* adjust to suit */
	display: flex;
	flex-direction: column;
	gap: var(--spacing);
	max-width: calc(100vw - var(--quad-spacing));

	min-height: 480px;
}
@media screen and (max-width: 679px) {
	.showcase .content {
		max-width: calc(100vw - ( var(--quad-spacing) * 2 ));
	}
}
.showcase figure {
	flex: 0 0 auto;
	width: 280px;
	height: 480px;
	display: block;

	overflow: hidden;
}
.showcase img {
	aspect-ratio: 1 / 1.7143;
	display: block;
	object-fit: cover;
	/*width: auto;*/
	/*height: min(62vh, 30rem);*/

	transform-origin: left;
}

.card {
	--icon-size: 36px;
}


.feature {
	position: relative;
}

.feature picture {
	height: 100%;
	position: relative;
	overflow: hidden;
	display: block;
}
.feature picture img {
	position: absolute;
	left: 50%;
	top: 0;
	max-width: none;
	height: 150vh;
	will-change: transform;
	aspect-ratio: 1 / 0.6666666667;
}


.projects > div:first-child {
	padding-top: var(--quad-spacing);
}

.project {
	position: relative;
	overflow: hidden;
}
.project__inner {
	position: relative;
	overflow: hidden;

	display: flex;
	flex-direction: column;
	justify-content: center;
}
.project__track {
	display: flex;
	flex-wrap: nowrap;
	align-items: stretch;
	/*align-items: center;*/
	gap: var(--double-spacing);
	width: max-content;
	will-change: transform;
}
.project .content {
	flex: 0 0 24rem;
	display: flex;
	flex-direction: column;
	gap: var(--spacing);
	max-width: calc(100vw - var(--quad-spacing));
}
@media screen and (max-width: 679px) {
	.project .content {
		max-width: calc(100vw - ( var(--quad-spacing) * 2 ));
	}
}
.project picture,
.project video {
	flex: 0 0 auto;
	display: block;
}
.project picture {
	overflow: hidden;
}
.project picture img {
	display: block;
	width: auto;
	height: min( 66vh, 41.25rem );
	max-width: none;
	transform-origin: left;
	aspect-ratio: 1 / 0.6666666667;
}
.project video {
	display: block;
	width: auto;
	height: min( 66vh, 41.25rem );
	max-width: none;
	aspect-ratio: 9 / 16;
	object-fit: cover;
}


.contact .logo-email {
	flex: 1;
}
@media screen and (min-width: 1080px) {
	.contact .email {
		padding-left: min(145px, 36%);
	}
}
.contact [class*="fade-"] ~ [class*="fade-"] {
	transition-delay: var(--transition-duration);
}


.overlay {
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	z-index: 97;
	overflow-x: hidden;
	overflow-y: scroll;
}
.overlay:not(.active) {
	opacity: 0;
	pointer-events: none;
}
.overlay__close {
	--icon-size: 14px;
	position: absolute;
	right: var(--double-spacing);
	top: var(--double-spacing);
	z-index: 98;
}

.form,
.form-body,
.field,
.field-input-wrapper {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: stretch;
}
.form,
.form-body {
	gap: var(--spacing-and-half);
}
.form input {
	margin: 0;
}

.field {
	transition: opacity var(--transition);
}
.field div[data-last-pass-icon-root] {
	display: none !important;
}

.form fieldset {
	border: none;
	padding: 0;
}
.choice-label,
.field-label,
.field-input {
	font-size: var(--small-font-size);
	color: var(--color-black);
}
.field-label {
	font-weight: var(--bold-font-weight);
	text-transform: uppercase;
	margin-bottom: var(--quarter-spacing);
}
.field-label,
.field-input-wrapper {
	margin-bottom: var(--half-spacing);
}
.field-label,
.choice-label {
	transition: color var(--transition);
}
.field-input,
.choice-label {
	font-weight: var(--font-weight);
}
legend.field-label {
	margin-bottom: var(--spacing);
}

.field-input {
	border: 1px solid var(--color-black);
	transition: color var(--transition), border-color var(--transition);
	padding: var(--quarter-spacing) var(--half-spacing);
	height: 40px;
}
.field-input:focus {
	border-color: var(--color-gold);
}

.field-choices {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-start;
	column-gap: var(--spacing);
	row-gap: var(--half-spacing);
}
.field-choices-cols {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
}
.choice {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: var(--quarter-spacing);
}

.form-footer {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
}
.form-footer .spinner {
	width: 40px;
}
.form:not(.busy) .form-footer .spinner {
	opacity: 0;
}

.form.busy {
	pointer-events: none;
}
.form.busy .form-body {
	opacity: 0.4;
}

.form-message,
.field-error {
	font-size: var(--small-font-size);
	color: var(--color-red);
}
.form-message {
	font-weight: var(--bold-font-weight);
}
.field.has-error .field-input,
.field.has-error .choice-input {
	border-color: var(--color-red);
}

.field-error:empty,
.form-message:empty {
	display: none;
}

.hp-field {
	position: absolute;
	left: -9999px;
	top: -9999px;
}
.is-hidden {
	display: none;
}