/*
@license
MyFonts Webfont Build ID 3867246, 2020-12-16T11:57:38-0500

The fonts listed in this notice are subject to the End User License
Agreement(s) entered into by the website owner. All other parties are 
explicitly restricted from using the Licensed Webfonts(s).

You may obtain a valid license at the URLs below.

Webfont: Titling Gothic FB Skyline Medium by Font Bureau
URL: https://www.myfonts.com/collections/font-bureau-foundry
 
© 2025 MyFonts Inc.
*/

@font-face {
	font-family: "TitlingGothicFBSkylineMedium";
	src: url("fonts/TitlingGothicFBSkylineMedium/font.woff2") format("woff2"),
		 url("fonts/TitlingGothicFBSkylineMedium/font.woff") format("woff");
	font-display: block;
}


/* CSS RESET ===================================================== */

*, *::before, *::after {
	margin: 0;
	padding: 0;
	border: 0;
	box-sizing: border-box;
	vertical-align: top;
}

ol,
ul {
	list-style: none;
}

button,
label {
	background: none;
	cursor: pointer;
	font: inherit;
	color: inherit;
}


/* BASE ===================================================== */

:root {
	--white: rgb(255, 255, 255);
	--grey: rgb(192, 192, 192);
	--v-dark-grey: rgb(48, 48, 48);
	--black: rgb(16, 16, 16);
}

html {
	font-size: clamp(56.25%, 54.99% + 0.0536vw, 62.5%); /* starts at 2240px ends at 375px 10px to 9px */
}

body {
	font-family: acumin-pro, sans-serif;
	font-variant-ligatures: common-ligatures;
	color: var(--white);
	background-color: var(--black);
	text-size-adjust: none;
	-webkit-text-size-adjust: none;
	-moz-text-size-adjust: none;
	-ms-text-size-adjust: none;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;	
}

/* body {
	background-image: url("images/column-grid.png");
	background-size: 2112px 512px;
	background-position: center top;
	background-repeat: repeat-y;
} */

a:link, a:visited { color: var(--white); text-decoration: none; }
a:hover, a:active { color: var(--grey); text-decoration: none; }


/* STRUCTURE ===================================================== */

.wrapper {
	max-width: 224rem;
	margin: 0 auto;
	padding: 0 clamp(2.6rem, 1.836rem + 2.0375vw, 6.4rem); /* starts at 2240px ends at 375px */
}

.full-height {
	min-height: 100vh;
	min-height: 100dvh;
}

.grid-layout {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	column-gap: clamp(2.6rem, 1.836rem + 2.0375vw, 6.4rem); /* starts at 2240px ends at 375px */
}

.image-content {
	border-top: 1px solid;
	padding: 3.1rem 0 6.4rem 0;
}


/* IMAGES ===================================================== */

img,
video,
picture {
	display: block;
	width: 100%;
	height: auto;
}

video {
	cursor: pointer;
}

.portrait {
	padding: 3.2rem 0 6.4rem 0;
	max-width: 20.8rem;
}


/* HEADER ===================================================== */

header {
	background-color: var(--black);
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 10;
}

.header-content {
	height: 8rem;
	display: flex;
	justify-content: space-between;
	align-items: center;
	border-bottom: 1px solid;
}

.logo {
	width: 12.8rem;
}

.nav-button {
	display: none;
}

nav ul {
	display: flex;
	column-gap: 1.6rem;
}

nav ul li {
	font-size: 1.8rem;
}

nav a:hover, nav a:active { color: var(--white); border-bottom: 1px solid var(--white); }

nav a[aria-current] { border-bottom: 1px solid var(--white); }


/* TYPOGRAPHY ===================================================== */

h1,
.brand-statements,
.portfolio p,
.insights-list p {
	font-family: charter-bt-pro, serif;
	font-variant-numeric: oldstyle-nums;
	font-weight: 400;
	word-spacing: -0.1em;
}

h1,
.brand-statements {
	line-height: 1.2em;
	padding-bottom: 4.8em;
}

h1 {
	font-size: clamp(3.6rem, 2.59312rem + 2.4138vw, 8rem); /* starts at 2240px ends at 500px */
}

h2,
.page-title {
	font-family: "TitlingGothicFBSkylineMedium", sans-serif;
	font-weight: 400;
	text-transform: uppercase;
}

h2 {
	font-size: clamp(6.4rem, 5.94016rem + 0.9195vw, 8rem); /* starts at 2240px ends at 500px */
	line-height: 9.6rem;
	padding: 12.8rem 0 3.2rem 0;
}

.page-title {
	font-size: 3.6rem;
	line-height: 3.2rem;
	padding: 12.8rem 0 3.2rem 0;
}

h3 {
	font-size: 2.4rem;
	font-weight: 400;
	line-height: 3.2rem;
	padding-bottom: 3.2rem;
}

.body-text {
	grid-column: 2;
	max-width: 99.2rem;
}

.text-content hr {
	margin-top: 12.8rem;
	border-top: 1px solid var(--white);
	padding-bottom: 3.1rem;
	grid-column: 1 / -1;
}

.text-content hr:first-of-type {
	margin-top: 0;
}

p {
	font-size: 2.1rem;
	line-height: 3.2rem;
	padding-bottom: 3.2rem;
}

.caption {
	font-size: 1.6rem;
	padding-bottom: 6.4rem;
}

.text-content ul,
.text-content ol {
	font-size: 2.1rem;
	line-height: 3.2rem;
	list-style-position: outside;
	margin: 0 0 3.2rem 1em;
}

.text-content ul {
	list-style-type: disc;
}

.text-content ol {
	list-style-type: decimal;
}

.services {
	display: inline-block;
	white-space: nowrap;
}

.services:not(:last-child)::after {
	content: " /";
}

.text-content a { border-bottom: 1px solid var(--grey); }


/* BIG NUMBER COUNTER ===================================================== */

body {
	counter-reset: bigNumber; /* Initialize the counter */
}

.big-numbers::before {
	counter-increment: bigNumber; /* Increment the counter */
	content: counter(bigNumber) "."; /* Display the counter */
}


/* HOMEPAGE ===================================================== */

.pitch h1 {
	padding-top: 14.4rem;
}

.hero-title {
	padding: 6.4rem 0 30vh 0;
}

.homepage .full-height {
	min-height: calc(100vh - 8rem);
	min-height: calc(100dvh - 8rem);
}

.homepage .page-title {
	border-top: 1px solid;
	padding-top: 6.3rem;
}

.brand-statements {
	font-size: clamp(3.2rem, 1.82064rem + 2.7586vw, 8rem); /* starts at 2240px ends at 500px */
}


/* TABLES ===================================================== */

table {
	width: 100%;
	border-collapse: collapse;
	margin: 3.2rem 0 6.4rem 0;
}

td, th {
	font-size: 2.1rem;
	font-weight: 400;
	line-height: 2.4rem;
	padding: 1.9rem 0.8rem 2rem 0.8rem;
	text-align: left;
	border: 1px solid;
}


/* FILTER ===================================================== */

.filter {
	display: flex;
	column-gap: 1.6rem;
	line-height: 3.2rem;
	padding: 1.6rem 0;
	font-size: 1.8rem;
}

.filter button:hover, .filter button:active { border-bottom: 1px solid var(--white);}

.filter button[aria-pressed="true"] { border-bottom: 1px solid var(--white); }


/* PORTFOLIO LIST ===================================================== */

.portfolio {
	border-top: 1px solid;
}

.portfolio li {
	padding: 3.2rem 0 3.1rem 0;
	border-bottom: 1px solid;
}

.portfolio li:first-of-type {
	padding-top: 3.1rem;
}

.portfolio li a {
	grid-template-columns: repeat(4, 1fr);
	align-items: center;
}

.portfolio p,
.insights-list p {
	font-size: clamp(2.8rem, 2.6392rem + 0.429vw, 3.6rem); /* starts at 2240px ends at 375px */
	line-height: 1.11111111em;
	padding-bottom: 0;
	grid-column: 2 / -1;
}

.project-title {
	color: var(--grey);
}

.portfolio a:hover, .portfolio a:active,
.portfolio-text a:hover, .portfolio-text a:active,
.insights-list a:hover, .insights-list a:active { color: var(--white); background-color: var(--v-dark-grey); }


/* PORTFOLIO TEXT LIST ===================================================== */

h2.portfolio-heading {
	padding-top: 32rem;
}

.portfolio-text a {
	padding: 3.1rem 0 3.2rem 0;
	border-top: 1px solid;
}

.portfolio-text li:last-child a {
	padding-bottom: 3.1rem;
	border-bottom: 1px solid;	
}

.portfolio-text p {
	font-size: 2.4rem;
	padding-bottom: 0;
}


/* INSIGHTS LIST ===================================================== */

.insights-list a {
	padding: 4.7rem 0 4.8rem 0;
	border-top: 1px solid;
	display: block;
}

.insights-list li:last-child a {
	padding-bottom: 4.7rem;
	border-bottom: 1px solid;	
}


/* FOOTER ===================================================== */

.strapline {
	padding: 16rem 0;
}

.footer-content {
	border-top: 1px solid;
	padding: 1.5rem 0 11.2rem 0;
}

.footer-content p {
	font-size: 1.8rem;
	line-height: 2.4rem;
	padding-bottom: 2.4rem;
}


/* RESPONSIVE ===================================================== */

@media screen and (max-width:1023px) {

	.nav-button {
		display: block;
		font-size: 1.8rem;
	}

	.nav-button:hover, .nav-button:active { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px; }

	nav {
		display: none;
	}

	body.nav-shown {
		height: 100vh;
		height: 100dvh;
		overflow: hidden;
	}

	body.nav-shown nav {
		display: block;
		position: fixed;
		top: 8rem;
		left: 0;
		right: 0;
		bottom: 0;
		padding: 0 clamp(2.6rem, 1.836rem + 2.0375vw, 6.4rem); /* starts at 2240px ends at 375px */
		background-color: var(--black);
		overflow-y: auto;
		z-index: 9;
	}

	nav ul {
		display: block;
		padding: 3.2rem 0 6.4rem 0;
	}

	nav ul li {
		font-family: "TitlingGothicFBSkylineMedium", sans-serif;
		text-transform: uppercase;
		font-size: clamp(8rem, 21vw, 16rem);
		line-height: 0.9em;
		overflow: hidden;
	}

	nav a:hover, nav a:active { color: var(--grey); border-bottom: none; }

	nav a[aria-current] {
		border-bottom: none;
	}
	
	.grid-layout {
		display: block;
	}

	.portfolio-text li p:nth-of-type(2) {
		color: var(--grey);
	}

	.portfolio p {
		padding: 1.6rem 0;
	}

	.caption {
		padding-bottom: 3.2rem;
	}
}

@media screen and (max-width:400px) {

	.filter {
		flex-direction: column;
	}
}