@keyframes swatch {
	0% {
		background-color: var(--swatch-one);
	}
	25% {
		background-color: var(--swatch-two);
	}
	50% {
		background-color: var(--swatch-three);
	}
	75% {
		background-color: var(--swatch-four);
	}
	100% {
		background-color: var(--swatch-one);
	}
}
*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	-webkit-text-size-adjust: 100%;
	        text-size-adjust: 100%;
}

body {
	margin: 0;
	color: #000000;
	background: #fff;
}

input[type=submit],
input[type=button],
button,
a {
	-webkit-tap-highlight-color: transparent;
	touch-action: manipulation;
	transition: 200ms;
	cursor: pointer;
}

img {
	height: auto;
	max-width: 100%;
	transition: 200ms;
	transition-property: opacity;
	vertical-align: middle;
}
img[data-src] {
	position: absolute;
	opacity: 0;
}

article,
aside,
figure,
footer,
header,
main,
nav {
	display: block;
}

blockquote,
embed,
fieldset,
figure,
iframe,
img,
legend,
object,
h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
ol,
dl {
	padding: 0;
	border: 0;
	margin: 0;
}

html {
	font: normal 400 100%/1.2 "Neutral", sans-serif;
}

.font\:500 {
	font-family: "Neutral";
	font-style: Normal;
	font-weight: 500;
}

.text\:sm {
	font-size: 0.625rem;
	line-height: 3.5;
	letter-spacing: 0.1875rem;
	text-transform: uppercase;
}
.text\:landing {
	font-size: 0.75rem;
	letter-spacing: 0.225rem;
	line-height: 2;
	text-transform: uppercase;
}
.text\:copy {
	font-size: 0.875rem;
	line-height: 1.714;
}

.text\:sm,
blockquote {
	font-size: 0.625rem;
	line-height: 3.5;
	letter-spacing: 0.1875rem;
	text-transform: uppercase;
}

blockquote {
	font-family: "Neutral";
	font-weight: 500;
	line-height: 1.5;
}
blockquote > p {
	max-width: 33rem;
	margin: 0 auto;
}

ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

a {
	text-decoration: none;
}
a:hover {
	color: inherit;
}
a[href^="mailto:"], a[href^="tel:"] {
	white-space: nowrap;
}

.screen-reader-text {
	position: absolute;
	overflow: hidden;
	width: 1px;
	height: 1px;
	padding: 0;
	border: 0;
	margin: 0;
	clip: rect(1px, 1px, 1px, 1px);
}

.about {
	position: relative;
	transform: translate(-50%, 0);
	text-align: center;
	margin: 0 auto;
	max-width: 27.3125rem;
	width: 100%;
	transform: translateY(-5.0125rem);
}
.about__content {
	margin: 0 0 1.9375rem 0;
}

.contact-details {
	flex-direction: column;
}

.landing {
	margin: 0 auto;
	text-align: center;
}
.landing > p {
	max-width: 13.75rem;
	margin: 2.75rem auto 0 auto;
}

body {
	overflow: hidden;
}

main {
	display: flex;
	align-items: center;
	flex-direction: column;
	justify-content: space-between;
	padding: 3.75rem 0 3.125rem 0;
	height: 100vh;
}

.modal {
	position: fixed;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	opacity: 0;
	visibility: hidden;
	transition: opacity 250ms ease, visibility 250ms ease;
}
.modal > * {
	display: flex;
	flex-direction: column;
	justify-content: center;
	position: relative;
	left: auto;
	top: auto;
	padding: 0 1.25rem;
	transform: translateY(9.125rem);
}
.modal-active .modal {
	opacity: 1;
	visibility: visible;
}
.modal-active .toggle {
	transform: rotate(135deg);
}

.site-footer {
	text-align: center;
}
.site-footer ul {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	justify-content: center;
}
.site-footer ul li {
	margin: 0 0.5em;
}

.site-header .wrap {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.site-logo {
	display: block;
	margin: 0 auto;
	width: 10rem;
	z-index: 20;
}

.splash {
	top: 0;
	left: 0;
	position: fixed;
	height: 100dvh;
	width: 100vw;
	opacity: 1;
	z-index: 1000;
	opacity: 1;
	visibility: visible;
	transition: opacity 1250ms ease, visibility 1250ms ease;
	padding: 3.75rem 0 3.125rem 0;
}
.splash div {
	position: relative;
	height: 100%;
	width: 100%;
}
.splash img {
	position: absolute;
	width: 10rem;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	transition: top 1250ms cubic-bezier(0.4, 0, 0.2, 1), transform 1250ms cubic-bezier(0.4, 0, 0.2, 1), opacity 1250ms ease;
	opacity: 0;
}
.splash--hidden .splash {
	opacity: 0;
	visibility: hidden;
}
.splash--visibility .splash img {
	opacity: 1;
}
.splash--movement .splash img {
	top: 0;
	transform: translate(-50%, 0%);
}

.swatch {
	aspect-ratio: 300/300;
	background: #520205;
	margin: 0 auto;
	box-shadow: -5px -5px 4px 0px rgba(255, 255, 255, 0.2) inset, 5px 5px 4px 0px rgba(0, 0, 0, 0.2509803922) inset;
}
.swatch, .swatch-mobile {
	aspect-ratio: 300/300;
	background: #520205;
	margin: 0 auto;
	box-shadow: -5px -5px 4px 0px rgba(255, 255, 255, 0.2) inset, 5px 5px 4px 0px rgba(0, 0, 0, 0.2509803922) inset;
	height: 41.43vh;
	max-height: 18.75rem;
}
.swatch-mobile {
	animation: swatch 7.5s infinite;
	width: 80vw;
	max-width: 18.75rem;
}

.embed {
	position: relative;
	display: block;
	height: 0;
	padding-bottom: 56.25%;
}
.embed embed,
.embed iframe,
.embed object,
.embed video {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.rollover::after {
	content: " ";
	background: url("../images/chevron.svg");
	background-size: contain;
	background-repeat: no-repeat;
	display: block;
	height: 0.4rem;
	margin: 0.5rem auto 0 auto;
	width: 0.7rem;
	opacity: 0;
}
.rollover:hover::after {
	opacity: 1;
}

.toggle {
	display: block;
	position: relative;
	height: 1.625rem;
	width: 1.625rem;
	z-index: 20;
}
.toggle span::before,
.toggle span::after {
	content: " ";
	display: block;
	position: absolute;
	height: 1px;
	width: 100%;
	top: 50%;
	background: #000000;
}
.toggle span::after {
	transform: rotate(90deg);
}

.bg\:body {
	background-color: #000000;
}
.bg\:light {
	background-color: #F4F2F0;
}
.bg\:putty {
	background-color: #DDD6CF;
}

.colour\:body {
	color: #000000;
}
.colour\:light {
	color: #F4F2F0;
}
.colour\:putty {
	color: #DDD6CF;
}

.cover {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	background-size: cover;
}

.flex {
	display: flex;
}

.spacious {
	justify-content: space-between;
}

.has-js :focus {
	outline: none;
}
.has-tab-focus :focus {
	outline: 2px auto;
}
@media screen and (min-width: 428px) {
	html {
		font: normal 400 112.5%/1.2 "Neutral", sans-serif;
	}
}
@media screen and (min-width: 860px) {
	html {
		font: normal 400 87.5%/1.2 "Neutral", sans-serif;
	}
	.text\:sm {
		font-size: 0.75rem;
		line-height: 1.75rem;
		letter-spacing: 0.225rem;
	}
	.text\:landing {
		font-size: 1rem;
		letter-spacing: 0.3rem;
		line-height: 1.2;
	}
	.text\:copy {
		font-size: 1rem;
		line-height: 1.5;
	}
	.text\:sm,
blockquote {
		font-size: 0.75rem;
		line-height: 1.75rem;
		letter-spacing: 0.225rem;
	}
	blockquote {
		line-height: 1.5;
	}
	.about {
		position: absolute;
		left: 50%;
		transform: translate(-50%, -50%);
		top: 50%;
		max-width: 52.5rem;
	}
	.about__content {
		margin: 0 0 3.9375rem 0;
	}
	.contact-details {
		flex-direction: row;
	}
	.landing > p {
		margin: 6.04vh auto 0 auto;
		max-width: unset;
	}
	main {
		padding: 10.989vh 0 8.57vh 0;
	}
	.modal > * {
		padding: 0;
		transform: translate(-50%, -50%);
	}
	.site-logo {
		padding: 0 0 5.714vh 0;
		width: 12.5rem;
	}
	.splash {
		padding: 10.989vh 0 8.57vh 0;
	}
	.splash img {
		width: 12.5rem;
	}
	.swatch {
		box-shadow: -10px -10px 4px 0px rgba(255, 255, 255, 0.2) inset, 10px 10px 4px 0px rgba(0, 0, 0, 0.2509803922) inset;
		aspect-ratio: 440/440;
		height: 48.35vh;
		max-height: 27.5rem;
		max-width: unset;
		width: unset;
	}
	.mobile {
		display: none;
	}
	.toggle {
		margin: 0 auto;
	}
}
@media screen and (min-width: 960px) {
	html {
		font: normal 400 100%/1.2 "Neutral", sans-serif;
	}
}
@media screen and (max-device-width: 860px) {
	.toggle {
		margin: 0 auto 3.8125rem auto;
	}
}
@media screen and (max-width: 860px) {
	.contact-details .text\:sm {
		line-height: 1.5;
	}
	.desktop {
		display: none;
	}
}
/*# sourceMappingURL=main.css.map */