/*
@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 ===================================================== */

html, body, button, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, hr, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, main, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	vertical-align: top;
}

ol,
ul {
	list-style: none;
}

button,
label {
	background: none;
	cursor: pointer;
}

*, *::before, *::after {
	box-sizing: border-box;
}


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

:root {
	--white: rgb(255, 255, 255);
	--grey: rgb(185, 188, 190);
	--v-dark-grey: rgb(45, 53, 62);
	--black: rgb(22, 31, 40);
}

html {
	font-size: clamp(9px, 8.7984px + 0.0536vw, 10px); /* 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;
}

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

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,
.big-quote,
.portfolio p,
.insights-list p {
	font-family: charter-bt-pro, serif;
	font-variant-numeric: oldstyle-nums;
	font-weight: 400;
	word-spacing: -0.1em;
}

h1 {
	font-size: clamp(3.6rem, 2.59312rem + 2.4138vw, 8rem); /* starts at 2240px ends at 500px */
	line-height: 1.2em;
	padding-bottom: 4.4em;
}

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

h2 {
	font-size: 6.4rem;
	line-height: 1em;
	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.1rem;
	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: '– ';
}

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

.services {
	display: inline-block;
}

.services + .services::before {
	content: "/ ";
}

.big-quote {
	font-size: clamp(3.2rem, 2.71744rem + 1.2869vw, 5.6rem); /* starts at 2240px ends at 375px */
	line-height: 1.14285714em;
	text-indent: -0.4em;
	padding-top: 1.6rem;
	grid-column: 1 / -1;
}

.credit {
	grid-column: 1 / -1;
}

.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-image {
	background-image: url("images/wave.jpg"); 
	background-size: cover;
	background-position: center;
}

.hero-image .wrapper {
	min-height: 100vh;
	min-height: 100dvh;
	display: flex;
	align-items: center;
}

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

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

.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 */
	line-height: 1.2em;
	padding-bottom: 4.6em;
}


/* DESIGN RATES PAGE ===================================================== */

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

table, td {
	border: 1px solid;
}

td {
	font-size: 2.1rem;
	line-height: 2.4rem;
	padding: 2rem 0.8rem;
	text-align: left;
	vertical-align: middle;
}


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

.filter-radio {
	position: absolute;
	left: -9999px;
}

.filter-label {
	font-size: 1.8rem;
	line-height: 3.2rem;
	margin-right: 1.6rem;
	padding: 1.6rem 0;
	display: inline-block;
}

.filter-label:hover, .filter-label:active { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px; }
.filter-radio:checked + .filter-label { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px; }

/* Default: All shows everything */
#filter-all:checked ~ .portfolio li { display: block; }

/* Branding filter */
#filter-branding:checked ~ .portfolio li { display: none; }
#filter-branding:checked ~ .portfolio li.branding { display: block; }

/* Web design filter */
#filter-web:checked ~ .portfolio li { display: none; }
#filter-web:checked ~ .portfolio li.web-design { display: block; }

/* Graphic design filter */
#filter-graphic:checked ~ .portfolio li { display: none; }
#filter-graphic:checked ~ .portfolio li.graphic-design { display: block; }


/* 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 {
	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 { 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;
}

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


/* 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;	
}

.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;
}

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


/* 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 {
		font-family: acumin-pro, sans-serif;
		display: block;
		color: var(--white);
		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;
		padding-left: 0;
	}

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

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

	h3 {
		font-size: 2.4rem;
	}

	.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:500px) {

	.filter-label {
		padding: 0;
		display: block;
	}

	.filter-label:first-of-type {
		padding-top: 1.6rem;
	}

	.filter-label:last-of-type {
		padding-bottom: 1.6rem;
	}
}