* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	line-height: 1em;
}

:root {
	--woolley-blue: #323e48;
	--woolley-orange: #ff5100;
	--woolley-grey: #d7d7d4;
	--woolley-blue-faded: #323e487f;
	--text-black: #1a1a1c;
	--column-width: 75px;
	--column-gap: 20px;
	--max-width: 1120px;
	--header-height: 7.14rem;
	--side-padding: 8vw;
	--bounded: max(var(--side-padding), calc((100vw - var(--max-width)) / 2));
}

@font-face {
	font-family: "Qonquer";
	src: url("/assets/fonts/Qonquer.otf");
}
@font-face {
	font-family: "Gotham Book";
	src: url("/assets/fonts/Gotham Book Regular.otf");
}
@font-face {
	font-family: "Gotham Bold";
	src: url("/assets/fonts/Gotham Bold.otf");
}

h1, h2, h3 {
	color: var(--woolley-blue);
}

h1, h2, h3, a.cta, button.cta {
	font-family: "Qonquer";
	font-weight: normal;
}
h2, h3, h4, h5, p, a.cta, button.cta {
	letter-spacing: 0.04em;
}
h1 {
	font-size: 5rem;
	letter-spacing: 0;
}
h2 {
	font-size: 4.3rem;
}
h3, a.cta, button.cta {
	font-size: 2.14rem;
}
h5, h6 {
	font-size: 1.3rem;
	font-weight: normal;
	line-height: 1.2em;
	text-transform: uppercase;
}
h6 {
	letter-spacing: 0.3em;
}
p {
	line-height: 1.57em;
}
p.large {
	font-size: 1.14rem;
	line-height: 1.3em;
}
p.small {
	font-size: 0.71rem;
	line-height: 1.3em;
}
p.x-small {
	font-size: 0.57rem;
}
a {
	color: inherit;
	text-decoration: none;
}
button {
	cursor: pointer;
}
*:focus {
	outline: none;
}
input, textarea {
	border-radius: 0;
	font-family: inherit;
	font-size: inherit;
	color: inherit;
	background-color: transparent;
}

html {
	font-size: 14px;
	font-family: "Gotham Book";
	color: var(--text-black);
}


.white { color: white; }
.orange { color: var(--woolley-orange); }
.grey { color: var(--woolley-grey); }
.blue { color: var(--woolley-blue); }

.bold { font-family: "Gotham Bold" }
.text-right { text-align: right; }
.text-center { text-align: center; }
.uppercase { text-transform: uppercase; }
.p-box p:not(:last-of-type) { margin-bottom: 1.43rem }


/* Sizing & Positioning */
.flex { display: flex; }
.align-start { align-items: flex-start; }
.align-center { align-items: center; }
.align-end { align-items: flex-end; }
.justify-start { justify-content: flex-start; }
.justify-center { justify-content: center; }
.justify-end { justify-content: flex-end; }
.justify-between { justify-content: space-between; }
.justify-around { justify-content: space-around; }
.column { flex-direction: column; }
.block { display: block; }
.relative { position: relative; }
.absolute { position: absolute; }
.absolute-0 {
	top: 0;
	left: 0;
	position: absolute;
}

.max-w-container {
	width: 100%;
	display: flex;
	justify-content: center;
}
.max-w {
	width: 100%;
	max-width: var(--max-width);
	display: flex;
	padding: 0 var(--side-padding);
	box-sizing: content-box;
}
.max-w-new {
	width: min(calc(100% - var(--side-padding) * 2), var(--max-width));
	max-width: var(--max-width);
	display: flex;
}

.half { width: 50%; }
.third { width: 33.333%; }
.quarter { width: 25%; }

.w-100 { width: 100%; }
.h-100 { height: 100%; }

.mb-1 { margin-bottom: 0.1em; }
.mb-2 { margin-bottom: 0.2em; }
.mb-3 { margin-bottom: 0.3em; }
.mb-4 { margin-bottom: 0.4em; }
.mb-5 { margin-bottom: 0.5em; }

.spaced { margin: 250px 0; }


/* CTA Link */
a.cta, button.cta {
	width: fit-content;
	display: flex;
	align-items: center;
	text-decoration: none;
	position: relative;
	white-space: nowrap;
	color: var(--woolley-orange);
	transition: color 0.2s ease-out;
}

button.cta {
	background-color: transparent;
	border: none;
}

a.cta::after, button.cta::after {
	content: "";
	width: 0.95em;
	height: 1em;
	margin-left: 1.6em;
	-webkit-mask: url("/assets/woolley_lines.svg") center/contain no-repeat;
	background-color: var(--woolley-orange);
	transition: background-color 0.2s ease-out, transform 0.2s ease-out;
}

a.cta:focus, button.cta:focus {
	outline: none;
}

a.cta.light:hover,
a.cta.light:focus,
button.cta.light:hover,
button.cta.light:focus
{
	color: var(--woolley-blue);
}

a.cta.light:hover::after,
a.cta.light:focus::after,
button.cta.light:focus::after,
button.cta.light:hover::after
{
	background-color: var(--woolley-blue);
}

a.cta.dark:hover, button.cta.dark:hover {
	color: var(--woolley-grey);
}
a.cta.dark:hover::after, button.cta.dark:hover::after {
	background-color: var(--woolley-grey);
}

a.cta.small {
	font-size: 1.5rem;
}
a.cta.small::after {
	margin-left: 1em;
}


/* Rotating buttons */
.hover-rotate {
	transition: transform 0.2s ease-out;
}
a.cta:hover::after,
a.cta:focus::after,
button.cta:hover::after,
button.cta:focus::after,
.hover-rotate:hover
{
	transform: rotate(0.5turn);
}


/* Image Hover */
.image-hover {
	width: 100%;
	height: 100%;
	padding: 4%;
	display: flex;
	align-items: center;
	justify-content: center;
	position: absolute;
	top: 0;
	left: 0;
	text-align: center;
	color: var(--woolley-grey);
	background-color: var(--woolley-blue-faded);
	overflow: hidden;
	opacity: 0;
	transition: opacity 0.6s;
}
.image-hover * {
	transform: scale(1.2);
	transition: transform 0.4s;
}
.image-hover:hover {
	opacity: 1;
}
.image-hover:hover * {
	transform: scale(1);
}


/* SLASH (growing-slash is from animations)
	--height: can't be in percentages - px, em, rem for the clip-path calc

	--top-offset: used for class-based adjustment (ex. .top-left)
	--left-offset:  used for class-based adjustment (ex. .top-left)
	--offset: [manual adjust] slides the slash up/down along its length

	--top: the top value after offset and class-based adjustments
	--left: the left value after offset and class-based adjustments
	The final top and left can be manually adjusted like:
		top: calc(var(--top) + 20px);
		left: calc(var(--left) - 100px);
*/
.slash, .growing-slash {
	--height: 28.57rem;
	--thickness: 1.1rem;
	--width: calc(var(--height) / 2 + var(--thickness));
	--top-offset: 0px;
	--left-offset: 0px;
	--offset: 0px;
	--top: calc(var(--top-offset) + var(--offset));
	--left: calc(var(--left-offset) - (var(--offset) / 2));
	width: var(--width);
	height: var(--height);
	position: absolute;
	top: var(--top);
	left: var(--left);
	background-color: var(--woolley-orange);
	clip-path: polygon(0 100%, calc(100% - var(--thickness)) 0%, 100% 0%, var(--thickness) 100%);
}

.slash.top-left, .growing-slash.top-left {
	--left-offset: calc((var(--width) - var(--thickness)) * -0.5);
	--top-offset: calc(var(--height) * -0.5);
}


@media screen and (max-width: 1024px) {
	html { font-size: 12px; }
}

@media screen and (max-width: 767px) {
	h2 { font-size: 3.4rem; }

	.max-w.responsive {
		flex-direction: column;
	}
	.max-w.responsive > * {
		width: 100%;
	}
}