html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, 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, nav, output, ruby, section, summary,time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font: inherit;
	font-size: 100%;
	vertical-align: baseline;
}
html {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
caption, th, td {
	text-align: left;
	font-weight: normal;
	vertical-align: middle;
}
q, blockquote {
	quotes: none;
}
q:before, q:after, blockquote:before, blockquote:after {
	content: "";
	content: none;
}
a img {
	border: none;
}
article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
	display: block;
}
@font-face {
	font-family: 'NeueHaasDisplay';
	font-style: normal;
	font-weight: 300;
	font-display: swap;
	src: local("NeueHaasDisplay Thin"), local("NeueHaasDisplay-Thin"), url("../fonts/NeueHaasDisplayThin.woff2") format("woff2"), url("../fonts/NeueHaasDisplayThin.woff") format("woff");
}
@font-face {
	font-family: 'NeueHaasDisplay';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: local("NeueHaasDisplay Medium"), local("NeueHaasDisplay-Medium"), url("../fonts/NeueHaasDisplayMediu.woff2") format("woff2"), url("../fonts/NeueHaasDisplayMediu.woff") format("woff");
}
@font-face {
	font-family: 'NeueHaasDisplay';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: local("NeueHaasDisplay Bold"), local("NeueHaasDisplay-Bold"), url("../fonts/NeueHaasDisplayBold.woff2") format("woff2"), url("../fonts/NeueHaasDisplayBold.woff") format("woff");
}

@font-face {
	font-family: 'FreeSansBold';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: local("FreeSansBold"), local("FreeSansBold"), url("../fonts/FreeSansBold.woff2") format("woff2"), url("../fonts/FreeSansBold.woff") format("woff");
	
}
.project-1 .project-background-container {
	transform: translate3d(0, -100vh, 0);
}
.project-1 .project-image-container {
	transform: translate3d(0, -56.8vw, 0);
}
@media screen and (min-width: 600px) {
	.project-1 .project-image-container {
		transform: translate3d(0, -47.3vw, 0);
	}
}
@media screen and (min-width: 980px) {
	.project-1 .project-image-container {
		transform: translate3d(0, -492px, 0);
	}
}
@media screen and (min-width: 1200px) {
	.project-1 .project-image-container {
		transform: translate3d(0, -572px, 0);
	}
}
.project-1 .project-title-container {
	transform: translate3d(0, -20vw, 0);
}
@media screen and (min-width: 600px) {
	.project-1 .project-title-container {
		transform: translate3d(0, -20vw, 0);
	}
}
@media screen and (min-width: 980px) {
	.project-1 .project-title-container {
		transform: translate3d(0, -14vw, 0);
	}
}
.project-1 .project-number-container {
	transform: translate3d(0, -14px, 0);
}
@media screen and (min-width: 980px) {
	.project-1 .project-number-container {
		transform: translate3d(0, -2.4vw, 0);
	}
}
.project-2 .project-background-container {
	transform: translate3d(0, -200vh, 0);
}
.project-2 .project-image-container {
	transform: translate3d(0, -113.6vw, 0);
}
@media screen and (min-width: 600px) {
	.project-2 .project-image-container {
		transform: translate3d(0, -94.6vw, 0);
	}
}
@media screen and (min-width: 980px) {
	.project-2 .project-image-container {
		transform: translate3d(0, -984px, 0);
	}
}
@media screen and (min-width: 1200px) {
	.project-2 .project-image-container {
		transform: translate3d(0, -1144px, 0);
	}
}
.project-2 .project-title-container {
	transform: translate3d(0, -40vw, 0);
}
@media screen and (min-width: 600px) {
	.project-2 .project-title-container {
		transform: translate3d(0, -40vw, 0);
	}
}
@media screen and (min-width: 980px) {
	.project-2 .project-title-container {
		transform: translate3d(0, -28vw, 0);
	}
}
.project-2 .project-number-container {
	transform: translate3d(0, -28px, 0);
}
@media screen and (min-width: 980px) {
	.project-2 .project-number-container {
		transform: translate3d(0, -4.8vw, 0);
	}
}
.project-3 .project-background-container {
	transform: translate3d(0, -300vh, 0);
}
.project-3 .project-image-container {
	transform: translate3d(0, -170.4vw, 0);
}
@media screen and (min-width: 600px) {
	.project-3 .project-image-container {
		transform: translate3d(0, -141.9vw, 0);
	}
}
@media screen and (min-width: 980px) {
	.project-3 .project-image-container {
		transform: translate3d(0, -1476px, 0);
	}
}
@media screen and (min-width: 1200px) {
	.project-3 .project-image-container {
		transform: translate3d(0, -1716px, 0);
	}
}
.project-3 .project-title-container {
	transform: translate3d(0, -60vw, 0);
}
@media screen and (min-width: 600px) {
	.project-3 .project-title-container {
		transform: translate3d(0, -60vw, 0);
	}
}
@media screen and (min-width: 980px) {
	.project-3 .project-title-container {
		transform: translate3d(0, -42vw, 0);
	}
}
.project-3 .project-number-container {
	transform: translate3d(0, -42px, 0);
}
@media screen and (min-width: 980px) {
	.project-3 .project-number-container {
		transform: translate3d(0, -7.2vw, 0);
	}
}
.step-1 .header-logo .logo-black {
	opacity: 0;
}
.step-1 .header-logo .logo-white {
	opacity: 1;
}

.step-1 .header-logo span {
	color: rgba(255, 255, 255, 0.5);
}
.step-1 .header-logo .name, .step-1 .header-logo .job span {
	color: #FFFFFF;
}
.step-1 header .menu span {
	color: #FFFFFF;
}
.step-1 header .menu span::before {
	background: rgba(255, 255, 255, 0.2);
}

.step-1 header .menu span::after {
	background: #FFFFFF;
}

/* Work sits on a dark project image (see .step-1 .project-background),
   same reason the header/nav switch to white above - the scroll-down
   cue needs the same inverse treatment or it's invisible against it. */
.step-1 .scroll-down {
	color: #FFFFFF;
}
.step-1 .scroll-down span:first-child {
	border-color: rgba(255, 255, 255, 0.5);
}
.step-1 .scroll-down span:first-child::after {
	background: #FFFFFF;
}

.step-1 .scroll-container {
	transform: translate3d(0, -100vh, 0);
}

.step-2 .scroll-container {
	transform: translate3d(0, -200vh, 0);
}

.step-3 .scroll-container {
	transform: translate3d(0, -300vh, 0);
}

@keyframes loading {
	99% {
		visibility: hidden;
	}
	100% {
		visibility: visible;
	}
}

.h1 {
	font-size: 10vw;
	font-weight: 600;
	line-height: 1.25;
	display: block;
	overflow: hidden;
	max-width: 32ch;
}
@media screen and (min-width: 600px) {
	
	.h1 {
		font-size: 7vw;
	}
}
@media screen and (min-width: 980px) {
	
	.h1 {
		font-size: 5.5vw;
	}
}

.h1 >
span {
	transform: translate3d(0, 300%, 0);
	display: inline-block;
	/* was 1.4s: the ~2s blank page on load came from this + the nav/scroll-down delays below (see README) */
	animation: animateTitle 0.3s cubic-bezier(0.91, 0.03, 0.12, 1) 1 forwards;
}
@media screen and (min-width: 980px) {

	.h1 >
	span {
		transform: translate3d(0, 200%, 0);
	}
}

.h1 >
span:nth-of-type(2) {
	animation-delay: 0.02s;
}

.h1 span.black {
	color: #000000;
}


@keyframes animateTitle {
	to {
		transform: translate3d(0, 0, 0);
	}
}

.h3 {
	font-size: 20px;
	color: #000000;
	font-weight: 600;
	margin-bottom: 30px;
}

.subtitle {
	font-family: "FreeSansBold", sans-serif;
	font-weight: 600;
	font-size: 1.125rem;
	display: block;
	margin-bottom: 4vh;
	width: 100%;
}

a {
	text-decoration: none;
	color: #000000;
}

p {
	margin-bottom: 16px;
	line-height: 1.6;
	/* Readability measure - a comfortable line length regardless of how wide
	   the surrounding grid column happens to be. Restored 2026-10-01 (per
	   Jason) after being removed site-wide on 2026-09-30 for forcing
	   unwanted wrapping inside case studies' already-narrow grid columns -
	   excluded there below instead of dropping the rule everywhere. */
	max-width: 65ch;
}

.casestudy-content p, .project-description p {
	/* Case-study body copy already sits in narrow grid columns by
	   construction - this guard mainly matters for the wider single-column
	   contexts (Profile, Contact) and would otherwise force extra unwanted
	   wrapping on top of the grid's own narrower columns here. */
	max-width: none;
}

p.last {
	margin-bottom: 0px !important;
}
@media screen and (min-width: 600px) and (orientation: portrait) {
	
	p {
		font-size: 18px;
	}
}

.grey {
	/* Accessibility audit, 2026-09-30: was #767676 (4.54:1 on white - a bare pass at
	   AA for the 10px text this is used on, e.g. .small-up labels). Darkened slightly
	   for a safer margin (~5.1:1); visually near-identical. */
	color: #6e6e6e;
}

.grey2 {
	color: #6c6c6c;
}

.black {
	color: #000000;
}

.white {
	color: #FFFFFF;
}

.white-opacity {
	color: rgba(255, 255, 255, 0.44);
}

.big-line-height {
	line-height: 1.8;
}

.project-title {
	color: #FFFFFF;
}

.project-title .letter {
	display: inline-block;
}

.project-title-big {
	font-size: 15vw;
	font-weight: 600;
	display: block;
	overflow: hidden;
	line-height: 16.5vw;
	margin-top: -1.1vw;
}
@media screen and (min-width: 980px) {
	
	.project-title-big {
		font-size: 10.7vw;
		margin-top: -0.5vw;
		line-height: 12vw;
	}
	/* .sc is applied to SureCloud's homepage <h2> only (index.html) - it's 9 characters,
	   longer than the other 4 project names, and overflows into the adjacent thumbnail image
	   at the default font-size without this override. Not dead code - an earlier audit this
	   session mistakenly concluded it was (a line-anchored grep missed this indented, nested
	   rule) and removed the class from the markup, which clipped the text; restored 2026-09-30. */
	.sc .project-title-big {
		font-size: 9.7vw !important;
		margin-top: -0.5vw;
		line-height: 12vw;
	}
}

.project-title-big .letter {
	line-height: 15vw;
}
@media screen and (min-width: 980px) {
	
	.project-title-big .letter {
		line-height: 11vw;
	}
}

.project-title-small {
	font-size: 3.5vw;
	display: block;
	width: 100%;
	text-align: center;
	padding-right: 0.6vw;
	margin-top: 1vw;
}
@media screen and (min-width: 600px) {
	
	.project-title-small {
		font-size: 2.8vw;
	}
}
@media screen and (min-width: 980px) {
	
	.project-title-small {
		font-size: 2vw;
		text-align: left;
		margin-top: 0.5vw;
	}
}

.project-title-small .letter {
	line-height: 4vw;
}
@media screen and (min-width: 600px) {
	
	.project-title-small .letter {
		line-height: 3.2vw;
	}
}
@media screen and (min-width: 980px) {
	
	.project-title-small .letter {
		line-height: 2.4vw;
	}
}

.project-section-title {
	font-weight: 300;
	font-size: 22px;
	color: #949494;
	display: inline-block;
	margin-bottom: 50px;
	letter-spacing: -0.5px;
}
@media screen and (min-width: 600px) {
	
	.project-section-title {
		font-size: 26px;
		margin-bottom: 60px;
	}
}
@media screen and (min-width: 980px) {
	
	.project-section-title {
		margin-bottom: 80px;
	}
}
@media screen and (min-width: 1280px) {
	
	.project-section-title {
		font-size: 30px;
	}
}

.project-section-title.section-desktop {
	margin-bottom: 20px;
}
@media screen and (min-width: 600px) {
	
	.project-section-title.section-desktop {
		margin-bottom: 40px;
	}
}

.project-section-title.margin-top {
	margin-top: 50px;
}
@media screen and (min-width: 600px) {
	
	.project-section-title.margin-top {
		margin-top: 100px;
	}
}
@media screen and (min-width: 980px) {
	
	.project-section-title.margin-top {
		margin-top: 130px;
	}
}

.project-section-title.white-opacity {
	color: rgba(255, 255, 255, 0.44);
}

.project-section-title.grey {
	color: #949494;
}

.big-p {
	font-size: 6vw;
	line-height: 1.4;
	font-weight: 600;
}
@media screen and (min-width: 600px) {
	
	.big-p {
		font-size: 3.5vw;
	}
}
@media screen and (min-width: 600px) and (orientation: portrait) {
	
	.big-p {
		font-size: 5vw;
	}
}
@media screen and (min-width: 1500px) {
	
	.big-p {
		font-size: 50px;
	}
}

.small-up, .menu, .scroll-down, .scroll-up {
	line-height: 1;
	text-transform: uppercase;
	font-size: 10px;
	letter-spacing: 1px;
}
@media screen and (min-width: 600px) {
	
	.small-up, .menu, .scroll-down, .scroll-up {
		font-size: 12px;
	}
}

.text-right {
	text-align: right;
}

.underline {
	position: relative;
	display: inline-block;
	background-image: linear-gradient(to right, #000000 50%, rgba(0, 0, 0, 0) 50%);
	background-repeat: no-repeat;
	background-size: 202% 2px;
	background-position: bottom right;
	transition: all 0.3s linear;
}

.underline:hover {
	color: #000000;
	background-position: bottom left;
}

.underline.behance {
	background-image: linear-gradient(to right, #0057ff 50%, rgba(0, 0, 0, 0) 50%);
}

.underline.behance:hover {
	color: #0057ff;
}

.underline.instagram {
	background-image: linear-gradient(to right, #e1306c 50%, rgba(0, 0, 0, 0) 50%);
}

.underline.instagram:hover {
	color: #e1306c;
}

.underline.youtube {
	background-image: linear-gradient(to right, #ff0000 50%, rgba(0, 0, 0, 0) 50%);
}

.underline.youtube:hover {
	color: #FF0000;
}

.button {
	display: inline-block;
	position: relative;
	padding: 22px 0;
	line-height: 1;
	letter-spacing: 0px;
	font-family: "FreeSansBold", sans-serif;
	font-weight: 600;
	font-size: 12px;
	color: #FFFFFF;
	border: 1px solid #FFFFFF;
	text-transform: uppercase;
	text-align: center;
	overflow: hidden;
	transition: color 0.2s 0.1s cubic-bezier(0.91, 0.03, 0.12, 1);
}

.button::after {
	content: "";
	background: #FFFFFF;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	transform: translate3d(0, 100%, 0);
	position: absolute;
	transition: transform 0.7s cubic-bezier(0.19, 1, 0.22, 1);
	z-index: -1;
}

.button:hover {
	color: #000000;
}

.button:hover::after {
	transform: translate3d(0, 0, 0);
}

.button-black {
	color: #000000;
	border: 1px solid #000000;
}

.button-black::after {
	background: #000000;
}

.button-black:hover {
	color: white;
}

.button .letter {
	display: inline-block;
	line-height: 1em;
}

.button:hover span {
	animation: buttonAnim 0.3s cubic-bezier(0.95, 0.05, 0.795, 0.035) 1 forwards, buttonAnim2 0.3s cubic-bezier(0.19, 1, 0.22, 1) 1 forwards;
}

.button:hover span:nth-child(1) {
	animation-delay: 0.035s, 0.635s;
}

.button:hover span:nth-child(2) {
	animation-delay: 0.07s, 0.67s;
}

.button:hover span:nth-child(3) {
	animation-delay: 0.105s, 0.705s;
}

.button:hover span:nth-child(4) {
	animation-delay: 0.14s, 0.74s;
}

.button:hover span:nth-child(5) {
	animation-delay: 0.175s, 0.775s;
}

.button:hover span:nth-child(6) {
	animation-delay: 0.21s, 0.81s;
}

.button:hover span:nth-child(7) {
	animation-delay: 0.245s, 0.845s;
}

.button:hover span:nth-child(8) {
	animation-delay: 0.28s, 0.88s;
}
@keyframes buttonAnim {
	to {
		transform: translate3d(0, -10px, 0);
		opacity: 0;
	}
}
@keyframes buttonAnim2 {
	from {
		transform: translate3d(0, 10px, 0);
		opacity: 0;
	}
	to {
		transform: translate3d(0, 0, 0);
		opacity: 1;
	}
}

.container {
	width: 92.6vw;
	margin-left: 7.4vw;
}
@media screen and (min-width: 600px) {
	
	.container {
		width: 94.6vw;
		margin-left: 2.6vw;
	}
}

.home {
	position: fixed;
	display: block;
	width: 100%;
	height: 100vh;
	overflow: hidden;
}

.scroll-container {
	position: relative;
	z-index: 1;
	width: 100%;
	transition: 1s transform cubic-bezier(0.91, 0.03, 0.12, 1);
}

/* Bug found 2026-09-30, continued: fixing .project-details' z-index (above) let real scroll
   gestures reach the case-study panel, but .project-details isn't opaque everywhere - as it
   scrolls, its transparent gaps let this element's own (static, never-moving) homepage hero
   text show through underneath. .home's overflow:hidden was relied on to prevent this ever
   being visible, but that only worked because nothing could scroll far enough to expose the
   gaps in the first place. Hiding this outright while a case study is open removes the
   problem at the source rather than patching every section's background. */
.is-project .scroll-container {
	visibility: hidden;
}

.content {
	position: relative;
	height: 100vh;
}

.flex {
	display: -webkit-flex;
	display: flex;
}

.flex-wrap {
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
}

.flex-nowrap {
	-webkit-flex-wrap: nowrap;
	flex-wrap: nowrap;
}

/* Two-up rows inside a col-8 box (case-study Decisions/Impact) need to wrap to one
   column below desktop - same as .project-description's own two-column rows, which
   use col-m-10 (effectively full-width at tablet) for exactly this reason - but need
   flex-nowrap at desktop specifically, because two nested col-4 items' widths and
   their col-8 parent's width round to different pixel values independently in this
   browser, so plain flex-wrap wraps them early by under a pixel even when they
   mathematically fit. Same pattern already used for .projects-list .project-content
   (line ~1676), just given a reusable name instead of repeating the media query. */
@media screen and (min-width: 980px) {
	.flex-nowrap-desktop {
		-webkit-flex-wrap: nowrap;
		flex-wrap: nowrap;
	}
}

.v-center {
	-webkit-align-items: center;
	align-items: center;
}

.v-start {
	-webkit-align-items: flex-start;
	align-items: flex-start;
}

.h-center {
	margin: 0 auto !important;
}

/* .center is referenced in the original site markup (e.g. the case studies' pull quotes)
   but was never actually defined - this class name did nothing. Defining it now
   as plain text-align: center, matching what that markup was clearly meant to do. */
.center {
	text-align: center;
}

.no-margin-right {
	margin-right: 0 !important;
}

.no-margin-bottom {
	margin-bottom: 0 !important;
}

.no-padding-top {
	padding-top: 0 !important;
}

.no-padding-bottom {
	padding-bottom: 0 !important;
}

.overflow-hidden {
	overflow: hidden;
}

/* Accessibility audit, 2026-09-30: skip link, visually hidden until focused. */
.skip-link {
	position: absolute;
	top: -40px;
	left: 0;
	z-index: 10000;
	padding: 12px 20px;
	background: #000;
	color: #fff;
	text-decoration: none;
}
.skip-link:focus {
	top: 0;
}

/* Accessibility audit, 2026-09-30: respect the OS-level reduced-motion preference. */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

.fullwidth {
	width: 100%;
}

.margin-bottom-l {
	margin-bottom: 50px;
}
@media screen and (min-width: 600px) {
	
	.margin-bottom-l {
		margin-bottom: 100px;
	}
}
@media screen and (min-width: 980px) {
	
	.margin-bottom-l {
		margin-bottom: 150px;
	}
}
@media screen and (max-width: 979px) {
	
	.order-mobile-1 {
		order: 1;
	}
	
	.order-mobile-2 {
		order: 2;
	}
}
@media screen and (max-width: 599px) {
	
	.order-mobile-only-1 {
		order: 1;
	}
	
	.order-mobile-only-2 {
		order: 2;
	}
}
@media screen and (max-width: 599px) {
	
	.hide-mobile {
		display: none;
	}
	
	.flex-wrap-mobile {
		-webkit-flex-wrap: wrap;
		flex-wrap: wrap;
	}
}
@media screen and (max-width: 979px) {
	
	.hide-tablet {
		display: none;
	}
}
@media screen and (min-width: 980px) {
	
	.hide-desktop {
		display: none;
	}
}

.left-margin {
	margin-left: 7.4vw;
}
@media screen and (min-width: 600px) {
	
	.left-margin {
		margin-left: calc(5.5vw + 2.6vw * 2);
	}
}

.col-s-1, .col-s-2, .col-s-3, .col-s-4 {
	margin-right: 3.7vw;
}

.col-s-offset-1 {
	margin-left: calc(15.75vw + 7.4vw);
}

.col-s-1 {
	width: 15.75vw;
}

.col-s-2 {
	width: calc( 15.75vw*2 + 7.4vw);
}

.col-s-3 {
	width: calc( 15.75vw*3 + 7.4vw*2);
}

.col-s-4 {
	width: calc( 15.75vw*4 + 7.4vw*3);
}
@media screen and (min-width: 600px) {
	
	.col-m-1, .col-m-2, .col-m-3, .col-m-4, .col-m-5, .col-m-6, .col-m-7, .col-m-8, .col-m-9, .col-m-10, .col-m-11, .col-m-12 {
		margin-right: 2.6vw;
	}
	
	.col-m-offset-1 {
		margin-left: calc(5.5vw + 2.6vw);
	}
	
	.col-m-1 {
		width: 5.5vw;
	}
	
	.col-m-2 {
		width: calc( 5.5vw*2 + 2.6vw);
	}
	
	.col-m-3 {
		width: calc( 5.5vw*3 + 2.6vw*2);
	}
	
	.col-m-4 {
		width: calc( 5.5vw*4 + 2.6vw*3);
	}
	
	.col-m-5 {
		width: calc( 5.5vw*5 + 2.6vw*4);
	}
	
	.col-m-6 {
		width: calc( 5.5vw*6 + 2.6vw*5);
	}
	
	.col-m-7 {
		width: calc( 5.5vw*7 + 2.6vw*6);
	}
	
	.col-m-8 {
		width: calc( 5.5vw*8 + 2.6vw*7);
	}
	
	.col-m-9 {
		width: calc( 5.5vw*9 + 2.6vw*8);
	}
	
	.col-m-10 {
		width: calc( 5.5vw*10 + 2.6vw*9);
	}
	
	.col-m-11 {
		width: calc( 5.5vw*11 + 2.6vw*10);
	}
	
	.col-m-12 {
		width: calc( 5.5vw*12 + 2.6vw*11);
	}
}
@media screen and (min-width: 980px) {
	
	.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12 {
		margin-right: 2.6vw;
	}
	
	.col-offset-1 {
		margin-left: calc(5.5vw + 2.6vw);
	}
	
	.col-1 {
		width: 5.5vw;
	}
	
	.col-2 {
		width: calc( 5.5vw*2 + 2.6vw);
	}
	
	.col-3 {
		width: calc( 5.5vw*3 + 2.6vw*2);
	}
	
	.col-4 {
		width: calc( 5.5vw*4 + 2.6vw*3);
	}
	
	.col-5 {
		width: calc( 5.5vw*5 + 2.6vw*4);
	}
	
	.col-6 {
		width: calc( 5.5vw*6 + 2.6vw*5);
	}
	
	.col-7 {
		width: calc( 5.5vw*7 + 2.6vw*6);
	}
	
	.col-8 {
		width: calc( 5.5vw*8 + 2.6vw*7);
	}
	
	.col-9 {
		width: calc( 5.5vw*9 + 2.6vw*8);
	}
	
	.col-10 {
		width: calc( 5.5vw*10 + 2.6vw*9);
	}
	
	.col-11 {
		width: calc( 5.5vw*11 + 2.6vw*10);
	}
	
	.col-12 {
		width: calc( 5.5vw*12 + 2.6vw*11);
	}
}

.background-grid {
	position: fixed;
	width: 100%;
	height: 100%;
	pointer-events: none;
}

.background-grid div {
	height: 100%;
	width: 15.75vw;
	margin-right: 7.4vw;
	border-left: 1px solid rgba(151, 151, 151, 0.1);
	border-right: 1px solid rgba(151, 151, 151, 0.1);
	transition: 0.5s linear;
}
@media screen and (min-width: 600px) {
	
	.background-grid div {
		width: 5.5vw;
		margin-right: 2.6vw;
	}
}

.background-grid div.no-transition {
	transition: none;
}

.background-grid div:first-child {
	margin-left: 7.4vw;
}
@media screen and (min-width: 600px) {
	
	.background-grid div:first-child {
		margin-left: 2.6vw;
	}
}
@media screen and (max-width: 600px) {
	
	.background-grid div:nth-child(5), .background-grid div:nth-child(6), .background-grid div:nth-child(7), .background-grid div:nth-child(8), .background-grid div:nth-child(9), .background-grid div:nth-child(10), .background-grid div:nth-child(11), .background-grid div:nth-child(12) {
		display: none;
	}
}

.step-1 >
.background-grid div.color-change {
	border-left: 1px solid rgba(255, 255, 255, 0.08);
	border-right: 1px solid rgba(255, 255, 255, 0.08);
}

.is-project >
.background-grid div {
	border-left: 1px solid rgba(255, 255, 255, 0.08);
	border-right: 1px solid rgba(255, 255, 255, 0.08);
}

.casestudy-content .background-grid {
	margin-top: 300px;
	position: absolute;
	height: 100%;
}

header {
	position: fixed;
	top: 30px;
	width: 100%;
	z-index: 2;
}

.is-project header {
 position: absolute;
	overflow:hidden;
}
@media screen and (min-width: 600px) {
	
	header {
		top: 4vh;
	}
}
@media screen and (min-width: 980px) {
	
	header {
		top: 6vh;
	}
}

header .container {
	-webkit-justify-content: space-between;
	justify-content: space-between;
}

.header-logo .logo {
	position: relative;
	overflow: hidden;
	width: 5.5vw;
	height: 5.5vw;
	min-width: 40px;
	min-height: 40px;
	margin-right: 2.6vw;
	transition: 0.3s 0.5s background cubic-bezier(0.91, 0.03, 0.12, 1), box-shadow 1s cubic-bezier(0.91, 0.03, 0.12, 1);
	border-radius:15px;
}

.header-logo .logo-black, .header-logo .logo-white {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: auto;
	transition: 0.3s 0.5s opacity cubic-bezier(0.91, 0.03, 0.12, 1);
}

.header-logo .logo-white {
	opacity: 0;
}

.header-logo span {
	font-size: 1.25rem;
	color: #6e6e6e;
	transition: 0.3s 0.5s color cubic-bezier(0.91, 0.03, 0.12, 1), opacity 1s cubic-bezier(0.91, 0.03, 0.12, 1);
}

.header-logo .name {
	width: 100%;
	margin-bottom: 4px;
}
@media screen and (min-width: 600px) {
	
	.header-logo .name {
		width: auto;
		margin-right: 20px;
		margin-bottom: 0;
	}
}

.header-logo .name, .header-logo .job span {
	color: #000000;
	transition: 0.3s 0.5s color cubic-bezier(0.91, 0.03, 0.12, 1), opacity 1s cubic-bezier(0.91, 0.03, 0.12, 1);
}

/* .is-project .header-logo .logo  {
	box-shadow: 0 0 40px 0px rgba(0, 0, 0, 0.5);
} */

.is-project .header-logo span {
	opacity: 0;
}

.menu-open {
	position: fixed;
	z-index: 3;
	width: 41px;
	height: 39px;
	padding: 10px;
	display: flex;
	top: calc(30px + 2.75vw - 20px);
	right: calc(7.4vw - 10px);
	transition: opacity 0.3s cubic-bezier(0.91, 0.03, 0.12, 1);
}
@media screen and (min-width: 600px) {
	
	.menu-open {
		right: calc(2.9vw - 10px);
		top: calc(4vh + 2.75vw - 20px);
	}
}
@media screen and (min-width: 980px) {
	
	.menu-open {
		top: calc(6vh + 2.75vw - 20px);
	}
}

.menu-open.hidden {
	opacity: 0;
}

.menu-open span {
	position: relative;
	height: 1px;
	width: 100%;
	margin: auto 0;
	background: #000000;
	transform-origin: center center;
	transition: transform 0.3s 1.1s cubic-bezier(0.91, 0.03, 0.12, 1), background 0.5s 1s cubic-bezier(0.91, 0.03, 0.12, 1), box-shadow 1s cubic-bezier(0.91, 0.03, 0.12, 1);
}

.menu-open span::before, .menu-open span::after {
	content: "";
	height: 1px;
	width: 100%;
	background: #000000;
	position: absolute;
	left: 0;
}

.menu-open span::before {
	top: -8px;
	transition: transform 0.2s 1.1s cubic-bezier(0.91, 0.03, 0.12, 1), background 0.5s 1s cubic-bezier(0.91, 0.03, 0.12, 1), box-shadow 1s cubic-bezier(0.91, 0.03, 0.12, 1);
}

.menu-open span::after {
	top: 8px;
	transition: transform 0.2s 1.1s cubic-bezier(0.91, 0.03, 0.12, 1), opacity 0s 1.3s cubic-bezier(0.91, 0.03, 0.12, 1), background 0.5s 1s cubic-bezier(0.91, 0.03, 0.12, 1), box-shadow 1s cubic-bezier(0.91, 0.03, 0.12, 1);
}

.is-project .menu-open span {
	background: #FFFFFF;
	box-shadow: 0 1px 0px rgba(0, 0, 0, 0.26);
	transition: transform 0.3s 1.1s cubic-bezier(0.91, 0.03, 0.12, 1), background 0.5s 0.4s cubic-bezier(0.91, 0.03, 0.12, 1), box-shadow 1s cubic-bezier(0.91, 0.03, 0.12, 1);
}

.is-project .menu-open span::before, .is-project .menu-open span::after {
	background: #FFFFFF;
	box-shadow: 0 1px 0px rgba(0, 0, 0, 0.26);
}

.is-project .menu-open span::before {
	transition: transform 0.2s 1.1s cubic-bezier(0.91, 0.03, 0.12, 1), background 0.5s 0.4s cubic-bezier(0.91, 0.03, 0.12, 1), box-shadow 1s cubic-bezier(0.91, 0.03, 0.12, 1);
}

.is-project .menu-open span::after {
	transition: transform 0.2s 1.1s cubic-bezier(0.91, 0.03, 0.12, 1), opacity 0s 1.3s cubic-bezier(0.91, 0.03, 0.12, 1), background 0.5s 0.4s cubic-bezier(0.91, 0.03, 0.12, 1), box-shadow 1s cubic-bezier(0.91, 0.03, 0.12, 1);
}

.menu-open.open span {
	transform: rotate(45deg);
	background: #FFFFFF;
	transition: transform 0.3s 0.3s cubic-bezier(0.91, 0.03, 0.12, 1), background 0.2s cubic-bezier(0.91, 0.03, 0.12, 1);
}

.menu-open.open span::before {
	transform: rotate(90deg) translateX(8px);
	background: #FFFFFF;
	transition: transform 0.2s 0.3s cubic-bezier(0.91, 0.03, 0.12, 1), background 0.2s cubic-bezier(0.91, 0.03, 0.12, 1);
}

.menu-open.open span::after {
	transform: rotate(90deg) translateX(-8px);
	opacity: 0;
	background: #FFFFFF;
	transition: transform 0.2s 0.3s cubic-bezier(0.91, 0.03, 0.12, 1), opacity 0s 0.5s cubic-bezier(0.91, 0.03, 0.12, 1), background 0.2s cubic-bezier(0.91, 0.03, 0.12, 1);
}

.menu {
	margin: 9vh 0 0 0;
}

.black.interaction {text-decoration: underline !important}

.menu span, .menu .interaction >
span {
	position: relative;
	display: block;
	overflow: hidden;
	padding-bottom: 10px;
	transition: 0.3s 0.5s color cubic-bezier(0.91, 0.03, 0.12, 1), 0.8s width cubic-bezier(0.91, 0.03, 0.12, 1), 0.8s margin-right cubic-bezier(0.91, 0.03, 0.12, 1), opacity 0.6s cubic-bezier(0.91, 0.03, 0.12, 1);
}
@media screen and (min-width: 600px) {
	
	.menu span, .menu .interaction >
	span {
		padding-bottom: 20px;
	}
}

.menu span::before, .menu span::after, .menu .interaction >
span::before, .menu .interaction >
span::after {
	content: "";
	position: absolute;
	width: 100%;
	height: 1px;
	bottom: 0;
	left: 0;
	transition: 0.3s 0.5s background cubic-bezier(0.91, 0.03, 0.12, 1);
}

.menu span::before, .menu .interaction >
span::before {
	background: #CBCBCB;
}

.menu span::after, .menu .interaction >
span::after {
	background: #000000;
	left: -100%;
	transform: translate3d(0, 0, 0);
	transition: 0.8s all cubic-bezier(0.91, 0.03, 0.12, 1);
}

.menu span.active::after, .menu .interaction >
span.active::after {
	transform: translate3d(100%, 0, 0);
}

.menu .active {
	color: #000000;
}

header .menu {
	transition: none;
}

.is-project header .menu {
	margin: 0;
	transition: margin 0s 1s linear;
}

header .menu span {
	opacity: 0;
	transform: translate3d(0, 100%, 0);
	overflow: hidden;
	/* was 0.5s with 0.8-1.1s delays below: nav tabs didn't finish appearing until 1.6s in */
	animation: menuReveal 0.15s cubic-bezier(0.91, 0.03, 0.12, 1) 1 forwards;
}

header .menu span:nth-child(1) {
	animation-delay: 0.08s;
}

header .menu span:nth-child(2) {
	animation-delay: 0.11s;
}

header .menu span:nth-child(3) {
	animation-delay: 0.14s;
}

header .menu span:nth-child(4) {
	animation-delay: 0.17s;
}
@keyframes menuReveal {
	to {
		opacity: 1;
		transform: translate3d(0, 0, 0);
	}
}



/* .menu-profile no longer pages through sub-sections (see the Profile
   simplification note below), so it uses the plain full-width active
   underline from the base .menu span.active::after rule, same as
   Intro and Connect. */


.project-0 .menu-work.active::after {
	transform: translate3d(25%, 0, 0);
}

.project-1 .menu-work.active::after {
	transform: translate3d(50%, 0, 0);
}

.project-2 .menu-work.active::after {
	transform: translate3d(75%, 0, 0);
}

.project-3 .menu-work.active::after {
	transform: translate3d(100%, 0, 0);
}














.step-1 header .menu-hi, .step-1 header .menu-profile, .step-1 header .menu-contact, .step-2 header .menu-hi, .step-2 header .menu-work, .step-2 header .menu-contact, .step-3 header .menu-hi, .step-3 header .menu-work, .step-3 header .menu-profile, .is-project header .menu-work {
	width: 0;
	margin-right: 0;
	opacity: 0;
}

/* "Scroll down"/"Back to top" on a mouse+keyboard device (this site's
   whole navigation is wheel/click driven there); "Swipe down"/"Swipe up"
   on a touch device, where the actual gesture the visitor needs is a
   swipe (the site listens for swiped-down/swiped-up events - see
   main.js). Decided by input capability, not viewport width, since a
   touch laptop or a desktop-width tablet should still see the right one. */
.cue-touch {
	display: none;
}
@media (hover: none) and (pointer: coarse) {
	.cue-desktop {
		display: none;
	}
	.cue-touch {
		display: inline;
	}
}

.scroll-down span:first-child, .scroll-up span:first-child {
	position: relative;
	width: 17px;
	height: 26px;
	display: inline-block;
	margin-right: 10px;
	border-radius: 8px;
	border: 1px solid #979797;
}

.scroll-down span:first-child::after, .scroll-up span:first-child::after {
	content: "";
	position: absolute;
	width: 1px;
	height: 6px;
	left: 7px;
	background: #979797;
	animation: wheelMove 0.6s linear infinite alternate;
}
@media screen and (min-width: 600px) and (max-width: 980px) {
	
	.scroll-down {
		margin-left: calc(5.5vw + 2.6vw);
	}
}

.scroll-down span:first-child::after {
	bottom: 5px;
}

.scroll-up span:first-child::after {
	top: 7px;
}

.scroll-up {
	margin-top: 0;
	position: absolute;
	bottom: 6vh;
}
@keyframes wheelMove {
	to {
		transform: translate3d(0, -3px, 0);
	}
}

.presentation .container {
	padding-top: 40vh;
}
@media screen and (max-height: 500px) {
	/* 1.4.10 Reflow: at very short viewports (e.g. high browser zoom) this
	   much top padding pushed the headline + scroll-down cue past the
	   bottom of this section's fixed height:100vh slide - verified they
	   were clipped, invisibly, the same class of bug fixed on Profile
	   earlier. See ACCESSIBILITY.md. */
	.presentation .container {
		padding-top: 15vh;
	}
}
@media screen and (max-width: 979px) {
	
	.presentation .h1 br.desktop {
		display: none;
	}
}
@media screen and (min-width: 980px) {
	
	.presentation .h1 br.mobile {
		display: none;
	}
}

.presentation .subtitle {
	display: block;
	overflow: hidden;
}

.presentation .subtitle span {
	transform: translate3d(0, 100%, 0);
	display: inline-block;
	animation: animateTitle 0.3s cubic-bezier(0.91, 0.03, 0.12, 1) 1 forwards;
}

.presentation .scroll-down {
	/* Was margin-top: 17vh with no position set - a normal-flow element
	   pushed down a fixed distance from the headline above it, so it
	   landed at a different, less predictable height than the pinned
	   scroll-down/back-to-top cues on every other section (Profile,
	   Contact), which are position: absolute; bottom: 6vh within the
	   same height: 100vh slide. Matched to that pattern for consistency. */
	position: absolute;
	bottom: 6vh;
	opacity: 0;
	/* was 1s duration + 1.2s delay: nothing above-the-fold was fully settled until 2.2s in */
	animation: opacity 0.25s 0.15s cubic-bezier(0.91, 0.03, 0.12, 1) 1 forwards;
}
@keyframes opacity {
	to {
		opacity: 1;
	}
}

.projects-list {
	width: 100vw;
	height: 100vh;
	position: relative;
}

.projects-list .scroll-down {
	position: absolute;
	bottom: 6vh;
	/* Bug found 2026-10-01: Intro's and Profile's versions of this cue sit
	   inside .container (margin-left: 7.4vw, 2.6vw at >=600px), landing
	   further right than this one - a direct child of .projects-list
	   itself, with no equivalent offset. Matching .container's own
	   margin-left here directly, at the same breakpoint, aligns this cue
	   with Intro/Profile instead of leaving it flush with the edge. */
	left: 7.4vw;
}
@media screen and (min-width: 600px) {

	.projects-list .scroll-down {
		left: 2.6vw;
	}
}
.is-project .projects-list .scroll-down {
	/* Work's own cue has no reason to show once a case study is open full-
	   screen over it - it was poking out at the edge of the case study
	   panel instead of being covered cleanly, the way the rest of the
	   underlying Work section already is (see the other .is-project
	   .projects-list ... rules nearby). */
	display: none;
}

.projects-list .project-number {
	text-align: left;
	letter-spacing: -1px;
	font-family: "FreeSansBold", sans-serif;
	font-weight: 600;
	font-size: 14px;
	color: rgba(255, 255, 255, 0.4);
	align-self: flex-start;
	margin-top: 1.2vh;
	transition: opacity 0.4s 1s cubic-bezier(0.91, 0.03, 0.12, 1);
}
@media screen and (max-width: 979px) {
	
	.projects-list .project-number {
		width: 100%;
		display: -webkit-flex;
		display: flex;
		-webkit-justify-content: center;
		justify-content: center;
		margin-right: 0;
	}
}
@media screen and (min-width: 980px) {
	
	.projects-list .project-number {
		display: block;
		margin-top: 2.2vh;
		text-align: right;
		transform: translateX(6%);
		font-size: 2.4vw;
	}
}

.projects-list .project-number-active {
	height: 14px;
	overflow: hidden;
	position: relative;
	display: block;
}
@media screen and (min-width: 980px) {
	
	.projects-list .project-number-active {
		height: 2.4vw;
		width: 100%;
	}
}

.projects-list .project-number-container {
	width: 100%;
	height: auto;
	transition: 1s transform cubic-bezier(0.91, 0.03, 0.12, 1);
}

.projects-list .project-number span {
	color: #FFFFFF;
	font-weight: 600;
	display: block;
}

.is-project .projects-list .project-number {
	opacity: 0;
	transition: opacity 0.4s cubic-bezier(0.91, 0.03, 0.12, 1);
}

.projects-list .project-content {
	padding-top: 28vh;
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
}
@media screen and (min-width: 600px) {

	.projects-list .project-content {
		padding-top: 25vh;
	}
}
@media screen and (max-height: 500px) {
	/* 1.4.10 Reflow - same reasoning as the image height rule below. */
	.projects-list .project-content {
		padding-top: 10vh;
	}
}
@media screen and (min-width: 980px) {
	
	.projects-list .project-content {
		-webkit-flex-wrap: nowrap;
		flex-wrap: nowrap;
		padding-top: 20vh;
	}
}

.projects-list .project-text {
	margin-top: -2vh;
}
@media screen and (min-width: 600px) {
	
	.projects-list .project-text {
		margin-top: 0;
	}
}
@media screen and (max-width: 979px) {
	
	.projects-list .project-text {
		margin-right: inherit;
	}
}
@media screen and (min-width: 980px) {
	
	.projects-list .project-text {
		margin-top: 12vh;
	}
}
@media screen and (min-width: 600px) and (max-width: 979px) {
	
	.projects-list .project-text {
		width: 100%;
	}
}

.projects-list .project-title {
	display: inline-block;
	width: 100%;
	position: relative;
	overflow: hidden;
	height: 20vw;
	margin-top: 2vh;
	transition: opacity 1s 1s cubic-bezier(0.91, 0.03, 0.12, 1), transform 1s 1s cubic-bezier(0.91, 0.03, 0.12, 1);
}
@media screen and (min-width: 980px) {
	
	.projects-list .project-title {
		height: 14vw;
		width: auto;
		margin-top: 0;
	}
}

.is-project .projects-list .project-title {
	opacity: 0;
	transform: translate3d(0, -50vh, 0);
	transition: opacity 1s cubic-bezier(0.91, 0.03, 0.12, 1), transform 1s cubic-bezier(0.91, 0.03, 0.12, 1);
}

.projects-list .project-title h2 {
	display: inline-block;
	height: 20vw;
}
@media screen and (min-width: 600px) {
	
	.projects-list .project-title h2 {
		height: 20vw;
	}
}
@media screen and (min-width: 980px) {
	
	.projects-list .project-title h2 {
		height: 14vw;
	}
}
@media screen and (max-width: 979px) {
	
	.projects-list .project-title h2 {
		width: 100%;
	}
}

.projects-list .project-title-container {
	position: relative;
	height: auto;
	transition: 1s transform cubic-bezier(0.91, 0.03, 0.12, 1);
	text-align: left;
}
@media screen and (max-width: 979px) {
	
	.projects-list .project-title-container {
		width: 100%;
		text-align: center;
	}
}

.projects-list .project-image {
	position: relative;
	height: 56.8vw;
	z-index: 1;
	overflow: hidden;
	margin-bottom: 3.5vh;
	margin-right: 0;
	order: -1;
	direction: rtl;
	transform: translate3d(0, 60%, 0);
	transition: 1s ease-out;
}

.step-1 .projects-list .project-image {
	transform: translate3d(0, 0, 0);
	transition: 1s ease-out;
}
@media screen and (min-width: 980px) {
	
	.step-1 .projects-list .project-image {
		transition: 1.6s ease-out;
	}
}

.step-2 .projects-list .project-image {
	transform: translate3d(0, 0, 0);
}
@media screen and (min-width: 600px) {
	
	.projects-list .project-image {
		width: 100%;
		height: 47.3vw;
	}
}
@media screen and (min-width: 980px) {
	
	.projects-list .project-image {
		width: 370px;
		height: 492px;
		margin-top: 0;
		margin-bottom: 0;
		margin-right: inherit;
		order: 1;
	}
}
@media screen and (min-width: 1200px) {

	.projects-list .project-image {
		width: 430px;
		height: 572px;
	}
}
@media screen and (max-height: 500px) {
	/* 1.4.10 Reflow - this wrapper has its own independent fixed/vw height
	   (up to 572px) regardless of viewport height, separate from
	   .project-image-img's own height rule above; both needed the same
	   fix. See ACCESSIBILITY.md. */
	.projects-list .project-image {
		height: 32vh;
	}
}
@media screen and (min-width: 980px) and (max-height: 780px) {
	
	.projects-list .project-image {
		margin-top: -30px;
	}
}

.projects-list .project-image-mask {
	overflow: hidden;
	display: block;
	position: relative;
	width: 100%;
	height: 100%;
	transition: 1s 1s width cubic-bezier(0.91, 0.03, 0.12, 1);
}

.is-project .projects-list .project-image-mask {
	width: 0;
	transition: 1s width cubic-bezier(0.91, 0.03, 0.12, 1);
}

.projects-list .project-image-container {
	position: absolute;
	height: auto;
	transition: 1s transform cubic-bezier(0.91, 0.03, 0.12, 1);
}
@media screen and (min-width: 980px) {
	
	.projects-list .project-image-container {
		width: 370px;
	}
}
@media screen and (min-width: 1200px) {
	
	.projects-list .project-image-container {
		width: 430px;
	}
}

.projects-list .project-image-img {
	height: 56.8vw;
	width: 100%;
	position: relative;
	display: block;
}
@media screen and (min-width: 600px) {
	
	.projects-list .project-image-img {
		height: 47.3vw;
	}
}
@media screen and (min-width: 980px) {
	
	.projects-list .project-image-img {
		height: 492px;
	}
}
@media screen and (min-width: 1200px) {

	.projects-list .project-image-img {
		height: 572px;
	}
}
@media screen and (max-height: 500px) {
	/* 1.4.10 Reflow: this image's height is set in vw/fixed px, entirely
	   independent of viewport height, so at short heights (e.g. high
	   browser zoom) it overflowed the section's fixed height:100vh slide
	   regardless of width - verified the Discover button and the image
	   itself were clipped, invisibly. Scaled to the available height
	   instead at this breakpoint. See ACCESSIBILITY.md. */
	.projects-list .project-image-img {
		height: 32vh;
	}
}

.projects-list .project-button {
	position: relative;
	width: 100%;
	margin-top: 3vh;
	transition: opacity 0.4s 1.5s cubic-bezier(0.91, 0.03, 0.12, 1);
}
@media screen and (min-width: 600px) {
	
	.projects-list .project-button {
		margin-top: 5vh;
	}
}
@media screen and (min-width: 980px) {
	
	.projects-list .project-button {
		margin-top: 10vh;
	}
}

.projects-list .project-button >
span:first-child, .projects-list .project-button >
span:nth-child(2), .projects-list .project-button >
span:nth-child(3), .projects-list .project-button >
span:nth-child(4) {
	background: #786EA8;
}

.project-3 .projects-list .project-button >
span:first-child, .project-3 .projects-list .project-button >
span:nth-child(2), .project-3 .projects-list .project-button >
span:nth-child(3), .project-3 .projects-list .project-button >
span:nth-child(4) {
	background: #9d538c;
}

.projects-list .project-button >
span:first-child, .projects-list .project-button >
span:nth-child(2) {
	position: absolute;
	left: 50%;
	height: 3px;
	z-index: 1;
}

.projects-list .project-button >
span:first-child {
	top: 0;
	transform: translate3d(-50%, 0, 0);
	transition: transform 0.1s 0.3s cubic-bezier(0.91, 0.03, 0.12, 1);
}

.step-1 .projects-list .project-button >
span:first-child {
	opacity: 0;
	transition: transform 0.1s 1s cubic-bezier(0.91, 0.03, 0.12, 1), opacity 0s 1.5s linear;
	transform: translate3d(50%, 0, 0);
}

.projects-list .project-button >
span:nth-child(2) {
	bottom: 0;
	transform: translate3d(-50%, 0, 0);
	transition: transform 0.1s 0.1s cubic-bezier(0.91, 0.03, 0.12, 1);
}

.step-1 .projects-list .project-button >
span:nth-child(2) {
	opacity: 0;
	transition: transform 0.1s 1.2s cubic-bezier(0.91, 0.03, 0.12, 1), opacity 0s 1.5s linear;
	transform: translate3d(-150%, 0, 0);
}

.projects-list .project-button >
span:nth-child(3), .projects-list .project-button >
span:nth-child(4) {
	position: absolute;
	left: 50%;
	height: 100%;
	width: 3px;
	z-index: 1;
}

.projects-list .project-button >
span:nth-child(3) {
	transform: translate3d(-6.8vw, 0, 0);
	transition: transform 0.1s cubic-bezier(0.91, 0.03, 0.12, 1);
}
@media screen and (max-width: 979px) {
	
	.projects-list .project-button >
	span:nth-child(3) {
		transform: translate3d(-19.45vw, 0, 0);
	}
}
@media screen and (max-width: 599px) {
	
	.projects-list .project-button >
	span:nth-child(3) {
		transform: translate3d(-60px, 0, 0);
	}
}

.step-1 .projects-list .project-button >
span:nth-child(3) {
	opacity: 0;
	transition: transform 0.1s 1.3s cubic-bezier(0.91, 0.03, 0.12, 1), opacity 0s 1.5s linear;
	transform: translate3d(-6.8vw, -100%, 0);
}
@media screen and (max-width: 979px) {
	
	.step-1 .projects-list .project-button >
	span:nth-child(3) {
		transform: translate3d(-19.45vw, -100%, 0);
	}
}
@media screen and (max-width: 599px) {
	
	.step-1 .projects-list .project-button >
	span:nth-child(3) {
		transform: translate3d(-60px, -100%, 0);
	}
}

.projects-list .project-button >
span:nth-child(4) {
	transform: translate3d(6.7vw, 0, 0);
	transition: transform 0.1s 0.2s cubic-bezier(0.91, 0.03, 0.12, 1), opacity 0s 1.5s linear;
}
@media screen and (max-width: 979px) {
	
	.projects-list .project-button >
	span:nth-child(4) {
		transform: translate3d(19.3vw, 0, 0);
	}
}
@media screen and (max-width: 599px) {
	
	.projects-list .project-button >
	span:nth-child(4) {
		transform: translate3d(59px, 0, 0);
	}
}

.step-1 .projects-list .project-button >
span:nth-child(4) {
	opacity: 0;
	transition: transform 0.1s 1.1s cubic-bezier(0.91, 0.03, 0.12, 1), opacity 0s 1.5s linear;
	transform: translate3d(6.7vw, 100%, 0);
}
@media screen and (max-width: 979px) {
	
	.step-1 .projects-list .project-button >
	span:nth-child(4) {
		transform: translate3d(19.3vw, 100%, 0);
	}
}
@media screen and (max-width: 599px) {
	
	.step-1 .projects-list .project-button >
	span:nth-child(4) {
		transform: translate3d(59px, 100%, 0);
	}
}

.projects-list .project-button .button {
	margin: auto;
	
}
@media screen and (max-width: 979px) {
	
	.projects-list .project-button .button {
		padding: 17px 0;
	}
}
@media screen and (max-width: 599px) {
	
	.projects-list .project-button .button {
		padding: 12px 0;
		width: 120px;
	}
}

.is-project .projects-list .project-button {
	opacity: 0;
	transition: opacity 0.4s cubic-bezier(0.91, 0.03, 0.12, 1);
}

.project-background {
	transform: translate3d(0, 100%, 0);
	position: fixed;
	z-index: -1;
	background: #FFFFFF;
	width: 100%;
	height: 100%;
	height: calc(var(--vh, 1vh) * 100);
	overflow: hidden;
	transition: 1s transform cubic-bezier(0.91, 0.03, 0.12, 1), height 0.5s linear;
}

.step-1 .project-background {
	transform: translate3d(0, 0, 0);
}

.step-2 .project-background, .step-3 .project-background {
	transform: translate3d(0, -100%, 0);
}

.project-background-container {
	position: relative;
	height: auto;
	width: 100%;
	transition: 1s transform cubic-bezier(0.91, 0.03, 0.12, 1), 1s 1s width cubic-bezier(0.91, 0.03, 0.12, 1);
}
@media screen and (min-width: 980px) {
	
	.project-background-container {
		width: calc( 5.5vw*8 + 2.6vw*9);
	}
	
	.is-project .project-background-container {
		width: 100%;
		transition: 1s transform cubic-bezier(0.91, 0.03, 0.12, 1), 1s width cubic-bezier(0.91, 0.03, 0.12, 1);
	}
}

.project-background-color {
	position: relative;
	height: 100vh;
	transition: height 0.5s linear;
	width: 100%;
}

.project-background-color-1 {
	background: #056096;
}

.project-background-color-2 {
	background: #147A62;
}

.project-background-color-3 {
	background: #786EA8;
}

.project-background-color-4 {
	background: #C65029;
}

/*.project-background-color-6 {
	background: #9d538c;
}
.project-background-color-7 {
	background: #66abba;
}*/




.profile {
	/* Was 28vh: tuned for centering a single short paged slide (the old
	   Proficiencies/Collaborations/stack carousel). Now the section shows
	   its full content at once inside a fixed height:100vh slide (see
	   README, "Profile section simplification"), so it needs most of that
	   height for content, not top padding.
	   --header-clearance is the fixed header's actual measured bottom edge
	   (set in main.js, same pattern as --vh below) - the header's own
	   height varies by breakpoint, so a guessed px value isn't reliable
	   here the way it is for most other spacing on this site.
	   --profile-pad is reused below so .container always gets exactly
	   the rest of the 100vh slide, however much padding-top ends up being. */
	--profile-pad: max(28vh, calc(var(--header-clearance, 200px) + 16px));
	padding-top: var(--profile-pad);
	height: 100vh;
}
@media screen and (min-width: 600px) {

	.profile {
		--profile-pad: max(34vh, calc(var(--header-clearance, 200px) + 16px));
	}
}
@media screen and (min-width: 600px) and (orientation: portrait) {

	.profile {
		--profile-pad: max(30vh, calc(var(--header-clearance, 200px) + 16px));
	}
}

.profile .container {
	height: calc(100vh - var(--profile-pad));
	overflow: hidden;
	transition: height 0.5s linear;
}

.profile .scroll-down {
	margin-top: 0;
	position: absolute;
	bottom: 6vh;
}
@media screen and (min-width: 600px) and (max-height: 820px) {
	/* Not enough room to show this without overlapping real content once
	   the section fits its full copy in one slide (see README) - the cue
	   is a nice-to-have, not load-bearing, so it just steps aside here.
	   Threshold moved up from 700px: verified at 1366x768 (a common
	   laptop resolution) that the title/quote at full size collided with
	   this cue at that height too, once both were restored to their
	   correct sizing. min-width excludes phones: mobile's .big-p is
	   already much smaller at that breakpoint, so a tall-but-narrow
	   phone screen (e.g. 375x812, just under this 820px threshold) never
	   actually needed this fallback - it was only tripping on the height
	   number coincidentally. */
	.profile .scroll-down {
		display: none;
	}
}
@media screen and (min-width: 600px) and (max-width: 980px) {

	.profile .scroll-down {
		margin-left: calc(5.5vw + 2.6vw);
	}
}

.profile-block {
	margin-bottom: 0.8vh;
}
.profile-block:last-child {
	margin-bottom: 0;
}
/* Profile typography rebalance, 2026-10-02 (Jason's brief, adjusted). The three
   tiers - headline, body, quote - were all the same grey with 4px/10px gaps
   between them, so the only hierarchy was size and the quote read as a third
   paragraph. Now: body is a touch darker than the headline's grey (small text
   needs more contrast than large), the quote is its own statement set apart
   by space and near-black colour. Vertical gaps use clamp() against vh rather
   than fixed px, because .profile .container is overflow:hidden at 100vh minus
   the top pad - fixed gaps clipped on short laptop viewports.
   Weight note: NeueHaasDisplay's 400 is the Medium file and there is no Regular
   or Text cut, so body can't get lighter without adding a font file - hierarchy
   here comes from size, colour and space, not weight. */
.profile p {
	margin-bottom: 1em;
	font-size: 18px;
	line-height: 1.6;
	max-width: 34em;
	color: #5f5f5f;
}

/* The closing line is a quote, not a second title - same type family as the
   headline so it doesn't feel like a different component, but near-black
   (echoing the headline's "work.") at a smaller size, with its own space above
   so it doesn't read as another paragraph. Colour is set here, not on
   .profile-quote alone, because .profile p (above) out-specifies a bare class.
   font-weight 500 resolves to the Medium file (no 500 face exists). */
.profile p.profile-quote {
	max-width: 20em;
	font-size: clamp(22px, 2vw, 28px);
	font-weight: 500;
	line-height: 1.25;
	letter-spacing: -0.02em;
	color: #1a1a1a;
	/* Hang the opening quotation mark so the first letter aligns with the body
	   text's left edge. */
	text-indent: -0.42em;
	margin-top: clamp(24px, 5vh, 40px);
	margin-bottom: 0;
	text-wrap: balance;
}
@media screen and (max-width: 599px) {
	/* Under 600px the blocks have no left margin to hang into, and .profile
	   .container is overflow:hidden, so the hung opening quote mark was clipped
	   off entirely - hang is off here. The headline also sits on the shared
	   .big-p size (6vw, ~22px), which put it level with the new 22px quote and
	   made the quote read as the louder statement; headline goes up and the
	   quote/body come down so the order is headline > quote > body again. */
	.profile .profile-title {
		font-size: clamp(26px, 7.5vw, 34px);
	}
	.profile p {
		font-size: 16px;
	}
	.profile p.profile-quote {
		font-size: 20px;
		text-indent: 0;
		margin-top: clamp(24px, 4.5vh, 32px);
	}
}
@media screen and (min-width: 600px) and (max-height: 820px) {
	/* A little extra breathing room at constrained heights; no longer
	   needs to shrink the quote's font-size specifically now that it has
	   its own smaller default size (see above) - that alone resolved the
	   overflow this was originally added for (verified at 1366x768). */
	.profile-block {
		margin-bottom: 0.5vh;
	}
}

/* Title: readability-measure cap plus a tighter line-height than .big-p's
   default 1.4 - standard for large display headlines. Selector was
   .profile h2.profile-title, which silently stopped matching when the
   element became an <h3> (found 2026-10-02: the cap and line-height had
   been dead since) - now tag-agnostic so a heading-level change can't
   orphan it again. Stays on the shared .big-p size scale rather than its
   own, so it matches the Connect headline next to it. margin-bottom was 0,
   leaving the headline 4px above the body text. */
.profile .profile-title {
	max-width: 26ch;
	line-height: 1.15;
	margin-bottom: clamp(16px, 4vh, 32px);
	text-wrap: balance;
}















.feature {
	position: relative;
	display: flex;
	align-items: center;
}
@media screen and (min-width: 980px) {
	
	.feature {
		display: block;
	}
}

.feature-count {
	color: #E9E9E9;
	font-size: 28vw;
	margin-left: -0.8vw;
	font-weight: 600;
}
@media screen and (min-width: 600px) and (orientation: portrait) {
	
	.feature-count {
		font-size: 20vw;
	}
}
@media screen and (min-width: 980px) {
	
	.feature-count {
		font-size: 25vw;
	}
}

.feature-logo {
	position: absolute;
	bottom: 6.6vw;
	left: 23vw;
	text-align: left;
}
@media screen and (min-width: 600px) and (orientation: portrait) {
	
	.feature-logo {
		left: 16vw;
	}
}
@media screen and (min-width: 980px) {
	
	.feature-logo {
		text-align: right;
		bottom: 35%;
		left: 6vw;
	}
}

.feature-logo svg {
	height: 2.8vh;
	width: auto;
}
@media screen and (min-width: 600px) and (orientation: portrait) {
	
	.feature-logo svg {
		max-height: 20px;
	}
}
@media screen and (min-width: 980px) {
	
	.feature-logo.count-1 {
		left: 4vw;
	}
}

.feature-logo.codrops svg {
	height: 6vh;
	transform: translateY(20%);
}
@media screen and (min-width: 600px) and (orientation: portrait) {
	
	.feature-logo.codrops svg {
		max-height: 40px;
	}
}

.feature-logo span {
	display: block;
	margin-top: 15px;
	font-size: 14px;
	color: #6e6e6e;
}
@media screen and (min-width: 980px) {
	
	.feature-logo span {
		font-size: 0.9vw;
	}
}










.contact .container {
	padding-top: 28vh;
}
@media screen and (min-width: 600px) {
	
	.contact .container {
		padding-top: 34vh;
	}
}
@media screen and (min-width: 600px) and (orientation: portrait) {

	.contact .container {
		padding-top: 30vh;
	}
}
@media screen and (max-height: 500px) {
	/* 1.4.10 Reflow - same reasoning as .presentation .container above. */
	.contact .container {
		padding-top: 15vh;
	}
}

.contact-buttons {
	margin: 5vh 0 6.5vh;
}

.contact .scroll-down {
	position: absolute;
	bottom: 6vh;
}
@media screen and (min-width: 600px) and (max-width: 980px) {
	
	.contact .scroll-down {
		margin-left: calc(5.5vw + 2.6vw);
	}
}

.project-details {
	padding-top: 16vh;
	visibility: hidden;
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	overflow: hidden;
	transition: visibility 0s 1s linear;
	/* No z-index here, on purpose - 2026-09-30: this used to carry z-index:2 to win
	   pointer/wheel hit-testing against #scroll-container (real scroll gestures were
	   landing on the hidden homepage underneath instead of an open case study), back
	   when a since-reverted accessibility fix had nested .project-details inside the
	   same <main> as #scroll-container and it needed to explicitly out-rank it. Now
	   that .project-details is a sibling of <main> again (matching the site's original
	   structure), DOM order alone puts it on top for both hit-testing and paint - so
	   z-index:2 is redundant, and removing it stops it from ALSO dragging the whole
	   panel (including its own solid-colour ::before backdrop) above the page-wide
	   background-grid, which is what made that grid disappear behind an open case
	   study's hero image and intro text. */
}
@media screen and (min-width: 980px) {
	
	.project-details {
		padding-top: 20vh;
	}
}

.is-project .project-details {
	transition: visibility 0s linear;
	visibility: visible;
	/* Bug found 2026-09-30: case studies taller than one viewport had no way to be scrolled
	   into view - .project-details' own overflow:hidden (above) always clipped them, and
	   nothing ever overrode it for this state. Scoped to .project-details itself (already
	   position:absolute, already toggled by .is-project) rather than touching .home, which
	   would also unclip the homepage content sitting behind it - tried that first and it
	   bled the homepage through, since .home's fixed positioning is what keeps the two views
	   from overlapping. Making the case-study panel scroll internally, bounded to the
	   viewport, avoids touching that relationship entirely. */
	max-height: 100vh;
	overflow-x: hidden;
	overflow-y: auto;
	/* Do NOT add -webkit-overflow-scrolling: touch here. It was removed 2026-10-05: on iPhone
	   Safari it made the tall case-study panel stop painting below the intro (blank green with
	   grid lines, content present but invisible). Reproduced in the iOS simulator; removing it
	   fixed all four case studies. Modern iOS scrolls this container with momentum anyway. */
}

.project-details::before {
	content: "";
	width: 100vw;
	height: 100%;
	position: absolute;
	z-index: -1;
	left: 50%;
	top: 0;
	transform: translateX(-50%);
	opacity: 0;
	transition: opacity 0s 1s, background 2s cubic-bezier(0.77, 0, 0.175, 1);
}

.is-project .project-details::before {
	opacity: 1;
	transition: opacity 0s 1s, background 2s cubic-bezier(0.77, 0, 0.175, 1);
}

.is-project.project-0 .project-details::before {
	background: #056096;
}

.is-project.project-1 .project-details::before {
	background: #147A62;
}

.is-project.project-2 .project-details::before {
	background: #786EA8;
}

.is-project.project-3 .project-details::before {
	background: #C65029;
}

/*.is-project.project-5 .project-details::before {
	background: #9d538c;
}
.is-project.project-6 .project-details::before {
	background: #66abba;
}*/













.project-slider {
	position: relative;
}

.project-slider .slick-list {
	padding: 0 !important;
	width: calc( 15.75vw*4 + 7.4vw*3.5) !important;
	margin-left: 5.7vw;
}
@media screen and (min-width: 600px) {
	
	.project-slider .slick-list {
		width: calc(5.5vw*11 + 2.6vw*10) !important;
		margin-left: 6.7vw;
	}
}

.project-slider .slick-track {
	display: flex;
}

.project-slider .slide-arrow {
	position: absolute;
	top: 0;
	width: 7.4vw;
	color: transparent;
	border: none;
	background: transparent;
	height: 100%;
	z-index: 1;
}
@media screen and (min-width: 600px) {
	
	.project-slider .slide-arrow {
		width: 2.6vw;
	}
}

.project-slider .slide-previous {
	left: 0;
}

.project-slider .slide-next {
	right: 0;
}

.project-slider .slick-slide {
	opacity: 0.4;
	mix-blend-mode: luminosity;
	transition: opacity 0.5s linear;
}

.project-slider .slick-current, .project-slider .slick-active, .project-slider .slick-center {
	opacity: 1;
	mix-blend-mode: normal;
}

.project-header {
	position: relative;
	background: transparent;
	width: 100%;
	overflow: hidden;
}

.project-header-slide {
	position: relative;
	width: calc( 15.75vw*4 + 7.4vw*3.5) !important;
	z-index: 0;
	padding-left: calc(7.4vw*0.25);
}
@media screen and (min-width: 600px) {
	
	.project-header-slide {
		padding-left: 4.05vw;
		width: calc(5.5vw*11 + 2.6vw*10) !important;
	}
}

.project-header-title {
	text-align: center;
}
@media screen and (min-width: 980px) {
	
	.project-header-title {
		text-align: left;
	}
}

.project-header-ban {
	position: relative;
	display: block;
	opacity: 0;
	overflow: hidden;
	transition: opacity 1s linear;
	margin-bottom: -7vw;
}

.is-project .project-header-ban {
	opacity: 1;
	transition: opacity 0s 1s linear;
}

.project-header-ban picture, .project-header-ban img {
	position: relative;
	display: block;
	width: 100%;
}

.project-header-ban picture::before, .project-header-ban picture::after {
	content: "";
	position: absolute;
	bottom: 0;
	width: 25%;
	height: 100%;
}

.project-header-ban picture::before {
	right: 25%;
	transition-delay: 0.1s;
	z-index: 1;
}

.project-header-ban picture::after {
	right: 0;
	transition-delay: 0;
}

.is-project .project-header-ban picture::before {
	transition-delay: 1.2s;
}

.is-project .project-header-ban picture::after {
	transition-delay: 1.3s;
}

.project-header-ban span {
	position: absolute;
	bottom: 0;
	width: 25%;
	height: 100%;
}

.project-header-ban span::after, .project-header-ban span::before {
	content: "";
	position: absolute;
	bottom: 0;
	width: 100%;
	height: 100%;
}

.project-header-ban span::before {
	left: 0;
	transition-delay: 0.3s;
}

.project-header-ban span::after {
	left: 100%;
	transition-delay: 0.2s;
}

.is-project .project-header-ban span::before {
	transition-delay: 1s;
}

.is-project .project-header-ban span::after {
	transition-delay: 1.1s;
}

.project-header-ban picture::after, .project-header-ban picture:before, .project-header-ban span::after, .project-header-ban span::before {
	transition-property: transform;
	transition-duration: 0.7s;
	transition-timing-function: cubic-bezier(0.91, 0.03, 0.12, 1);
	transform: translate3d(0, 0, 0);
}

.is-project .project-header-ban picture::after, .is-project .project-header-ban picture:before, .is-project .project-header-ban span::after, .is-project .project-header-ban span::before {
	transform: translate3d(0, 100%, 0);
	transition-duration: 1s;
}

.project-0 .project-header-ban picture::after, .project-0 .project-header-ban picture:before, .project-0 .project-header-ban span::after, .project-0 .project-header-ban span::before {
	background: #056096;
}

.project-1 .project-header-ban picture::after, .project-1 .project-header-ban picture:before, .project-1 .project-header-ban span::after, .project-1 .project-header-ban span::before {
	background: #147A62;
}

.project-2 .project-header-ban picture::after, .project-2 .project-header-ban picture:before, .project-2 .project-header-ban span::after, .project-2 .project-header-ban span::before {
	background: #786EA8;
}

.project-3 .project-header-ban picture::after, .project-3 .project-header-ban picture:before, .project-3 .project-header-ban span::after, .project-3 .project-header-ban span::before {
	background: #C65029;
}

/*
.project-5 .project-header-ban picture::after, .project-4 .project-header-ban picture:before, .project-4 .project-header-ban span::after, .project-4 .project-header-ban span::before {
	background: #9d538c;
}
.project-6 .project-header-ban picture::after, .project-4 .project-header-ban picture:before, .project-4 .project-header-ban span::after, .project-4 .project-header-ban span::before {
	background: #66abba;
}
*/





.project-name {
	position: relative;
	display: inline-block;
	overflow: hidden;
}

.project-name .letter {
	transform: translate3d(0, 110%, 0);
	transition-property: transform;
	transition-duration: 1s;
	transition-timing-function: cubic-bezier(0.91, 0.03, 0.12, 1);
}

.project-name .letter:nth-child(1) {
	transition-delay: 0.03s;
}

.is-project .slick-current .project-name .letter:nth-child(1) {
	transition-delay: 0.33s;
}

.project-name .letter:nth-child(2) {
	transition-delay: 0.06s;
}

.is-project .slick-current .project-name .letter:nth-child(2) {
	transition-delay: 0.36s;
}

.project-name .letter:nth-child(3) {
	transition-delay: 0.09s;
}

.is-project .slick-current .project-name .letter:nth-child(3) {
	transition-delay: 0.39s;
}

.project-name .letter:nth-child(4) {
	transition-delay: 0.12s;
}

.is-project .slick-current .project-name .letter:nth-child(4) {
	transition-delay: 0.42s;
}

.project-name .letter:nth-child(5) {
	transition-delay: 0.15s;
}

.is-project .slick-current .project-name .letter:nth-child(5) {
	transition-delay: 0.45s;
}

.project-name .letter:nth-child(6) {
	transition-delay: 0.18s;
}

.is-project .slick-current .project-name .letter:nth-child(6) {
	transition-delay: 0.48s;
}

.project-name .letter:nth-child(7) {
	transition-delay: 0.21s;
}

.is-project .slick-current .project-name .letter:nth-child(7) {
	transition-delay: 0.51s;
}

.project-name .letter:nth-child(8) {
	transition-delay: 0.24s;
}

.is-project .slick-current .project-name .letter:nth-child(8) {
	transition-delay: 0.54s;
}

.project-name .letter:nth-child(9) {
	transition-delay: 0.27s;
}

.is-project .slick-current .project-name .letter:nth-child(9) {
	transition-delay: 0.57s;
}

.project-name .letter:nth-child(10) {
	transition-delay: 0.3s;
}

.is-project .slick-current .project-name .letter:nth-child(10) {
	transition-delay: 0.6s;
}

.project-name .letter:nth-child(11) {
	transition-delay: 0.33s;
}

.is-project .slick-current .project-name .letter:nth-child(11) {
	transition-delay: 0.63s;
}

.project-name .letter:nth-child(12) {
	transition-delay: 0.36s;
}

.is-project .slick-current .project-name .letter:nth-child(12) {
	transition-delay: 0.66s;
}

.project-name .letter:nth-child(13) {
	transition-delay: 0.39s;
}

.is-project .slick-current .project-name .letter:nth-child(13) {
	transition-delay: 0.69s;
}

.project-name .letter:nth-child(14) {
	transition-delay: 0.42s;
}

.is-project .slick-current .project-name .letter:nth-child(14) {
	transition-delay: 0.72s;
}

.project-name .letter:nth-child(15) {
	transition-delay: 0.45s;
}

.is-project .slick-current .project-name .letter:nth-child(15) {
	transition-delay: 0.75s;
}

.project-name .letter:nth-child(16) {
	transition-delay: 0.48s;
}

.is-project .slick-current .project-name .letter:nth-child(16) {
	transition-delay: 0.78s;
}

.project-name .letter:nth-child(17) {
	transition-delay: 0.51s;
}

.is-project .slick-current .project-name .letter:nth-child(17) {
	transition-delay: 0.81s;
}

.project-name .letter:nth-child(18) {
	transition-delay: 0.54s;
}

.is-project .slick-current .project-name .letter:nth-child(18) {
	transition-delay: 0.84s;
}

.project-name .letter:nth-child(19) {
	transition-delay: 0.57s;
}

.is-project .slick-current .project-name .letter:nth-child(19) {
	transition-delay: 0.87s;
}

.project-name .letter:nth-child(20) {
	transition-delay: 0.6s;
}

.is-project .slick-current .project-name .letter:nth-child(20) {
	transition-delay: 0.9s;
}

.project-name .letter:nth-child(21) {
	transition-delay: 0.63s;
}

.is-project .slick-current .project-name .letter:nth-child(21) {
	transition-delay: 0.93s;
}

.project-name .letter:nth-child(22) {
	transition-delay: 0.66s;
}

.is-project .slick-current .project-name .letter:nth-child(22) {
	transition-delay: 0.96s;
}

.project-name .letter:nth-child(23) {
	transition-delay: 0.69s;
}

.is-project .slick-current .project-name .letter:nth-child(23) {
	transition-delay: 0.99s;
}

.project-name .letter:nth-child(24) {
	transition-delay: 0.72s;
}

.is-project .slick-current .project-name .letter:nth-child(24) {
	transition-delay: 1.02s;
}

.project-name .letter:nth-child(25) {
	transition-delay: 0.75s;
}

.is-project .slick-current .project-name .letter:nth-child(25) {
	transition-delay: 1.05s;
}

.project-name .letter:nth-child(26) {
	transition-delay: 0.78s;
}

.is-project .slick-current .project-name .letter:nth-child(26) {
	transition-delay: 1.08s;
}

.project-name .letter:nth-child(27) {
	transition-delay: 0.81s;
}

.is-project .slick-current .project-name .letter:nth-child(27) {
	transition-delay: 1.11s;
}

.project-name .letter:nth-child(28) {
	transition-delay: 0.84s;
}

.is-project .slick-current .project-name .letter:nth-child(28) {
	transition-delay: 1.14s;
}

.project-name .letter:nth-child(29) {
	transition-delay: 0.87s;
}

.is-project .slick-current .project-name .letter:nth-child(29) {
	transition-delay: 1.17s;
}

.project-name .letter:nth-child(30) {
	transition-delay: 0.9s;
}

.is-project .slick-current .project-name .letter:nth-child(30) {
	transition-delay: 1.2s;
}

.project-name .letter:nth-child(31) {
	transition-delay: 0.93s;
}

.is-project .slick-current .project-name .letter:nth-child(31) {
	transition-delay: 1.23s;
}

.project-name .letter:nth-child(32) {
	transition-delay: 0.96s;
}

.is-project .slick-current .project-name .letter:nth-child(32) {
	transition-delay: 1.26s;
}

.project-name .letter:nth-child(33) {
	transition-delay: 0.99s;
}

.is-project .slick-current .project-name .letter:nth-child(33) {
	transition-delay: 1.29s;
}

.project-name .letter:nth-child(34) {
	transition-delay: 1.02s;
}

.is-project .slick-current .project-name .letter:nth-child(34) {
	transition-delay: 1.32s;
}

.project-name .letter:nth-child(35) {
	transition-delay: 1.05s;
}

.is-project .slick-current .project-name .letter:nth-child(35) {
	transition-delay: 1.35s;
}

.project-name .letter:nth-child(36) {
	transition-delay: 1.08s;
}

.is-project .slick-current .project-name .letter:nth-child(36) {
	transition-delay: 1.38s;
}

.project-name .letter:nth-child(37) {
	transition-delay: 1.11s;
}

.is-project .slick-current .project-name .letter:nth-child(37) {
	transition-delay: 1.41s;
}

.project-name .letter:nth-child(38) {
	transition-delay: 1.14s;
}

.is-project .slick-current .project-name .letter:nth-child(38) {
	transition-delay: 1.44s;
}

.project-name .letter:nth-child(39) {
	transition-delay: 1.17s;
}

.is-project .slick-current .project-name .letter:nth-child(39) {
	transition-delay: 1.47s;
}

.project-name .letter:nth-child(40) {
	transition-delay: 1.2s;
}

.is-project .slick-current .project-name .letter:nth-child(40) {
	transition-delay: 1.5s;
}

.project-name .letter:nth-child(41) {
	transition-delay: 1.23s;
}

.is-project .slick-current .project-name .letter:nth-child(41) {
	transition-delay: 1.53s;
}

.project-name .letter:nth-child(42) {
	transition-delay: 1.26s;
}

.is-project .slick-current .project-name .letter:nth-child(42) {
	transition-delay: 1.56s;
}

.project-name .letter:nth-child(43) {
	transition-delay: 1.29s;
}

.is-project .slick-current .project-name .letter:nth-child(43) {
	transition-delay: 1.59s;
}

.project-name .letter:nth-child(44) {
	transition-delay: 1.32s;
}

.is-project .slick-current .project-name .letter:nth-child(44) {
	transition-delay: 1.62s;
}

.project-name .letter:nth-child(45) {
	transition-delay: 1.35s;
}

.is-project .slick-current .project-name .letter:nth-child(45) {
	transition-delay: 1.65s;
}

.project-name .letter:nth-child(46) {
	transition-delay: 1.38s;
}

.is-project .slick-current .project-name .letter:nth-child(46) {
	transition-delay: 1.68s;
}

.project-name .letter:nth-child(47) {
	transition-delay: 1.41s;
}

.is-project .slick-current .project-name .letter:nth-child(47) {
	transition-delay: 1.71s;
}

.project-name .letter:nth-child(48) {
	transition-delay: 1.44s;
}

.is-project .slick-current .project-name .letter:nth-child(48) {
	transition-delay: 1.74s;
}

.project-name .letter:nth-child(49) {
	transition-delay: 1.47s;
}

.is-project .slick-current .project-name .letter:nth-child(49) {
	transition-delay: 1.77s;
}

.project-name .letter:nth-child(50) {
	transition-delay: 1.5s;
}

.is-project .slick-current .project-name .letter:nth-child(50) {
	transition-delay: 1.8s;
}

.is-project .slick-current .project-name .letter {
	transform: translate3d(0, 0, 0);
}

.project-details-content {
	padding-bottom: 300px;
}

.project-details-content .separator {
	margin-top: 60px;
	width: 100%;
	height: 1px;
	position: relative;
	margin-bottom: 40px;
	overflow: hidden;
}

.project-details-content .separator::after {
	content: "";
	background: #FFFFFF;
	width: 100%;
	height: 1px;
	left: 0;
	top: 0;
	position: absolute;
	transform: translate3d(-100%, 0, 0);
	transition: transform 0.5s cubic-bezier(0.91, 0.03, 0.12, 1);
}
@media screen and (orientation: portrait), screen and (max-width: 1100px) {
	
	.project-details-content.is-loaded .project-description {
		opacity: 1;
		transform: translate3d(0, 0, 0);
		transition: opacity 1s 1.5s cubic-bezier(0.91, 0.03, 0.12, 1), transform 1s 1.5s cubic-bezier(0.91, 0.03, 0.12, 1);
	}
	
	.project-details-content.is-loaded .separator::after {
		transform: translate3d(0, 0, 0);
		transition: transform 0.5s 2.1s cubic-bezier(0.91, 0.03, 0.12, 1);
	}
}
@media screen and (min-width: 1100px) {
	
	.project-details-content.is-loaded[animate=false] .project-description {
		transform: translate3d(0, 100px, 0);
	}
	
	.project-details-content.is-loaded[animate=true] .project-description {
		opacity: 1;
		transform: translate3d(0, 0, 0);
		transition: opacity 0.7s cubic-bezier(0.91, 0.03, 0.12, 1), transform 0.8s cubic-bezier(0.91, 0.03, 0.12, 1);
	}
	
	.project-details-content.is-loaded[animate=true] .separator::after {
		transform: translate3d(0, 0, 0);
		transition: transform 0.3s cubic-bezier(0.91, 0.03, 0.12, 1);
	}
}

.project-details-content.exit-anim .project-description {
	opacity: 0;
	transform: translate3d(0, 200px, 0);
	transition: opacity 1s cubic-bezier(0.91, 0.03, 0.12, 1), transform 0s 1s cubic-bezier(0.91, 0.03, 0.12, 1);
}

.project-details-content.exit-anim .separator::after {
	transform: translate3d(-100%, 0, 0);
	transition: transform 0.5s cubic-bezier(0.91, 0.03, 0.12, 1);
}

.project-description {
	position: relative;
	width: 100%;
	transform: translate3d(0, 200px, 0);
	opacity: 0;
	transition: opacity 1s cubic-bezier(0.91, 0.03, 0.12, 1), transform 1s cubic-bezier(0.91, 0.03, 0.12, 1);
	z-index: -1;
}
@media screen and (min-width: 980px) {
	
	.project-description {
		margin-top: 70px;
	}
}

.project-description p {
	line-height: 1.8;
}

.project-description .small-up, .project-description .menu, .project-description .scroll-down, .project-description .scroll-up {
	display: inline-block;
	margin-bottom: 30px;
}

.project-casestudy {
	width: 100%;
	position: relative;
	visibility: hidden;
	transition: visibility 0s 1s linear;
}

.is-project .project-casestudy {
	visibility: visible;
	transition: visibility 0s 2s linear;
}

.project-casestudy .phone {
	margin-bottom: 60px;
	box-shadow: 0 2px 60px 0 rgba(0, 0, 0, 0.22), 0 12px 44px 0 transparent, 0 22px 64px 0 rgba(0, 0, 0, 0.04), inset 0 -8px 20px 0 rgba(0, 0, 0, 0.05);
	border-radius: 6vw;
}
@media screen and (min-width: 600px) {
	
	.project-casestudy .phone {
		border-radius: 4vw;
		position: relative;
		z-index: 1;
	}
}

.project-casestudy .phone >
div {
	background-image: linear-gradient(-180deg, #ffffff 50%, #fafbfc 100%);
	border-radius: 6vw;
	overflow: hidden;
}
@media screen and (min-width: 600px) {
	
	.project-casestudy .phone >
	div {
		border-radius: 3vw;
	}
}

.project-casestudy .phones-margin-top {
	margin-top: 17.2vh;
}

.project-casestudy .phones .phone {
	margin-bottom: 7.4vw;
}
@media screen and (min-width: 600px) {
	
	.project-casestudy .phones .phone {
		margin-bottom: 2.6vw;
	}
}

.project-casestudy .phones .tablet >
div {
	padding: 5vw 2vw;
}

.project-casestudy picture {
	position: relative;
	display: block;
}

.project-casestudy .small-radius {
	border-radius: 4px;
}

.project-casestudy .shadow {
	box-shadow: 0 2px 30px 0 rgba(0, 0, 0, 0.3);
}

.project-casestudy .desktop-screen {
	margin-bottom: 40px;
}
@media screen and (min-width: 600px) {
	
	.project-casestudy .desktop-screen {
		margin-bottom: 60px;
	}
}
@media screen and (min-width: 980px) {
	
	.project-casestudy .desktop-screen {
		margin-bottom: 100px;
	}
}

.project-casestudy .desktop-screen.shadow {
	box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.23);
}
@media screen and (min-width: 1100px) {
	
	.project-casestudy .desktop-screen, .project-casestudy .phone {
		transition: transform 1s cubic-bezier(0.77, 0, 0.175, 1), opacity 1s cubic-bezier(0.77, 0, 0.175, 1);
	}
	
	.project-casestudy .desktop-screen[animate=false], .project-casestudy .phone[animate=false] {
		transform: translate3d(0, 200px, 0);
		opacity: 0;
	}
	
	.project-casestudy .desktop-screen[animate=true], .project-casestudy .phone[animate=true] {
		transform: translate3d(0, 0, 0);
		opacity: 1;
	}
}

.project-casestudy .step-icon {
	width: 60px;
	height: 60px;
	border: 1px solid #909090;
	border-radius: 50%;
	margin-bottom: 20px;
	display: flex;
	transition: background 0.5s cubic-bezier(0.91, 0.03, 0.12, 1), border 0.5s cubic-bezier(0.91, 0.03, 0.12, 1);
}
@media screen and (min-width: 600px) {
	
	.project-casestudy .step-icon {
		margin-bottom: 40px;
	}
}

.project-casestudy .step-icon svg {
	margin: auto;
}
@media screen and (min-width: 600px) {
	
	.project-casestudy .step-icon[animate=false] {
		background: transparent;
		border: 1px solid #909090;
	}
	
	.project-casestudy .step-icon[animate=false] svg * {
		fill: #909090;
	}
	
	.project-casestudy .step-icon[animate=true] {
		background: #172633;
		border: 1px solid #172633;
	}
	
	.project-casestudy .step-icon[animate=true] svg * {
		fill: #FFFFFF;
	}
}

.project-casestudy .animate-line {
	display: none;
}
@media screen and (min-width: 980px) {
	
	.project-casestudy .animate-line {
		display: block;
	}
}

.project-casestudy .animate-line path {
	fill: none;
	stroke: #979797;
	stroke-width: 1px;
	stroke-dasharray: 2000px;
	stroke-dashoffset: 2000px;
	transition: stroke-dashoffset 1s cubic-bezier(0.91, 0.03, 0.12, 1);
}

.project-casestudy .animate-line[animate=true] path {
	stroke-dashoffset: 0;
}

.project-casestudy .section-margin-top {
	margin-top: 40px;
	padding-bottom: 10vw;
}
@media screen and (min-width: 600px) {
	
	.project-casestudy .section-margin-top {
		margin-top: 100px;
	}
}
@media screen and (min-width: 980px) {
	
	.project-casestudy .section-margin-top {
		margin-top: 130px;
	}
}

.project-casestudy .block-text {
	margin-bottom: 40px;
}

.project-casestudy .block-text picture {
	margin-bottom: 30px;
}

.project-casestudy .casestudy-content {
	position: relative;
	margin-top: -300px;
}

.project-casestudy .casestudy-content section {
	z-index: 0;
	width: 100%;
	position: relative;
	overflow: hidden;
}

.project-casestudy .casestudy-content section-home .project-section-title {
	color: #FFFFFF;
	opacity: 0.3;
	margin-top: 20px;
	display: block;
}

.project-casestudy .casestudy-content .bg-white {
	width: 100vw;
	height: 100%;
	top: 200px;
	position: absolute;
	z-index: 0;
	background: white;
}
@media screen and (min-width: 600px) {
	
	.project-casestudy .casestudy-content .bg-white {
		top: 300px;
	}
}

.project-casestudy .casestudy-content .small-up, .project-casestudy .casestudy-content .menu, .project-casestudy .casestudy-content .scroll-down, .project-casestudy .casestudy-content .scroll-up {
	color: #6e6e6e;
}

.project-casestudy .casestudy-content img.full {
	width: 100%;
	display: block;
}
@media screen and (min-width: 1100px) {
	
	.project-casestudy .section-home {
		transition: 1s cubic-bezier(0.91, 0.03, 0.12, 1);
	}
	
	.project-casestudy .section-home[animate=false] {
		transform: translate3d(0, 200px, 0);
		opacity: 0;
	}
	
	.project-casestudy .section-home[animate=true] {
		transform: translate3d(0, 0, 0);
		opacity: 1;
	}
}

.project-casestudy .section-home img {
	position: relative;
	display: block;
	transition: transform 0.7s cubic-bezier(0.91, 0.03, 0.12, 1);
}
@media screen and (max-width: 979px) {
	
	.project-casestudy .section-home img {
		width: 130%;
		margin-left: 7.4vw;
	}
}

.project-casestudy .section-colors {
	margin-top: -15vw;
}
@media screen and (min-width: 600px) {
	
	.project-casestudy .section-colors {
		margin-top: -20vw;
	}
}
@media screen and (min-width: 980px) {
	
	.project-casestudy .section-colors {
		margin-top: 0px;
	}
}

.project-casestudy .section-colors .section-color {
	position: relative;
	display: block;
	width: 100%;
	height: 100px;
	margin: 0 0 20px;
	transition: width 1s cubic-bezier(0.91, 0.03, 0.12, 1);
}
@media screen and (min-width: 600px) {
	
	.project-casestudy .section-colors .section-color {
		height: 200px;
	}
	
	.project-casestudy .section-colors .section-color[animate=false] {
		width: 0%;
	}
	
	.project-casestudy .section-colors .section-color[animate=true] {
		width: 100%;
	}
}

.project-casestudy .section-colors .secondary-colors {
	margin-top: 40px;
}

.project-casestudy .section-colors .secondary-colors .section-color {
	height: 30px;
}
@media screen and (min-width: 600px) {
	
	.project-casestudy .section-colors .secondary-colors .section-color {
		height: 60px;
	}
}

.project-casestudy .section-typography {
	padding-top: 60px;
}
@media screen and (min-width: 600px) {
	
	.project-casestudy .section-typography {
		padding-top: 100px;
	}
}

.project-casestudy .section-typography img {
	max-width: 100%;
	margin: 0 0 30px;
}
@media screen and (min-width: 600px) {
	
	.project-casestudy .section-typography img {
		margin: 0 0 40px;
	}
}

.project-casestudy .section-typography .small-up, .project-casestudy .section-typography .menu, .project-casestudy .section-typography .scroll-down, .project-casestudy .section-typography .scroll-up {
	margin-bottom: 40px;
	display: block;
}
@media screen and (max-width: 599px) {
	
	.project-casestudy .section-typography .typography:nth-of-type(1) {
		margin-bottom: 20px;
	}
}
@media screen and (min-width: 600px) {
	
	.project-casestudy .section-typography .typography {
		transition: all 1s cubic-bezier(0.91, 0.03, 0.12, 1);
	}
	
	.project-casestudy .section-typography .typography[animate=false] {
		transform: translate3d(-10%, 0, 0);
		opacity: 0;
	}
	
	.project-casestudy .section-typography .typography[animate=true] {
		transform: translate3d(0, 0, 0);
		opacity: 1;
	}
}

.project-casestudy .novakit .section-typography .section-background {
	position: absolute;
	top: 0;	
	left: 0;
	width: 100%;
	height: 460px;
	text-align: right;
}

.project-casestudy .novakit .section-typography .section-background img {
	width: 472px;
	height: 460px;
}

.section-boori .section-background {
	width: 100vw;
	height: 90vw;
	background: #c2baaf;
	position: absolute;
	left: 0;
	top: 300vw;
	z-index: -1;
}
@media screen and (min-width: 600px) {
	
	.section-boori .section-background {
		top: 260vw;
	}
}
@media screen and (min-width: 980px) {
	
	.section-boori .section-background {
		top: 250vw;
		height: 80vw;
	}
}

.section-boori .section-background-2 {
	height: auto;
	top: auto;
	bottom: 70vw;
	left: 0;
}
@media screen and (min-width: 600px) {
	
	.section-boori .section-background-2 {
		bottom: 60vw;
	}
}

.section-boori .section-background-2 img {
	width: 100%;
	display: block;
}



.page-wireframe {
	display: block;
	position: relative;
	z-index: 2;
}
@media screen and (max-width: 979px) {
	
	.page-wireframe {
		order: 1;
		height: 70vw;
	}
}
@media screen and (min-width: 980px) {
	
	.page-wireframe {
		position: absolute;
		width: 100%;
		top: 850px;
		left: 20vw;
		width: 90%;
		left: 32vw;
	}
}
@media screen and (min-width: 1280px) {
	
	.page-wireframe {
		width: 100%;
		left: 20vw;
	}
}
@media screen and (min-width: 1600px) {
	
	.page-wireframe {
		top: 950px;
	}
}
@media screen and (min-width: 1900px) {
	
	.page-wireframe {
		top: 1050px;
	}
}

.section-sirc {
	background: #1DC1DD;
	padding-top: 40px;
}
@media screen and (max-width: 599px) {
	
	.section-sirc .project-section-title {
		margin-bottom: 30px;
		padding-top: 20px;
	}
}
@media screen and (max-width: 979px) {
	
	.section-sirc .project-section-title {
		margin-bottom: 30px;
	}
}
@media screen and (min-width: 600px) {
	
	.section-sirc {
		padding-top: 100px;
	}
}
@media screen and (min-width: 980px) {
	
	.section-sirc {
		padding-top: 16vw;
	}
}
@media screen and (min-width: 1280px) {
	
	.section-sirc {
		padding-top: 24vw;
	}
}
@media screen and (min-width: 1600px) {
	
	.section-sirc {
		padding-top: 30vw;
	}
}

.section-sirc .phones {
	margin-top: 4vw;
}
@media screen and (max-width: 979px) {
	
	.section-sirc .phones {
		flex-wrap: wrap;
	}
}

.section-sirc .phones img {
	margin-bottom: 7.4vw;
}
@media screen and (min-width: 600px) {
	
	.section-sirc .phones img {
		margin-bottom: 2.6vw;
	}
}
@media screen and (min-width: 980px) {
	
	.section-sirc .phones div:nth-of-type(even) {
		margin-top: 200px;
	}
}

.sirc .section-colors-2 {
	margin-top: 40px;
}
@media screen and (min-width: 600px) {
	
	.sirc .section-colors-2 {
		margin-top: 60px;
	}
}
@media screen and (min-width: 980px) {
	
	.sirc .section-colors-2 {
		margin-top: 100px;
	}
}

.sirc .section-guide {
	background: #786EA8;
}

.sirc .section-guide picture {
	padding-top: 200px;
	width: 100%;
}
@media screen and (min-width: 600px) {
	
	.sirc .section-guide picture {
		padding-top: 24vw;
	}
}
@media screen and (min-width: 980px) {
	
	.sirc .section-guide picture {
		padding-top: 13vw;
	}
}

.sirc .section-guide-text {
	position: absolute;
}

.sirc .section-screens {
	padding-bottom: 3vw;
}


.sirc .section-background-1 {
	padding-top:80px;
	padding-bottom:80px;
	background: #2bc1dc !important ;
}

.sirc .section-background {
	position: absolute;
	bottom: 0;
	width: 100%;
	z-index: -1;
}

.sirc .section-background img {
	width: 100%;
	display: block;
}






.sirc .section-background-3 {
	background: #786EA8;
	height: 120vw;
	top: auto;
	bottom: 240vw;
	left: 0;
}



.novata .section-background-1 {
	padding-top:80px;
	padding-bottom:160px;
	background: #e3f5f7;
}

.surecloud .section-background-1 {
	padding-top:80px;
	padding-bottom:160px;
	background: #eef2f7;
}

.section-background-2 {
	padding-top:80px;
	padding-bottom:22px;
	background: #eeeeee;
}

.novata .section-background {
	position: absolute;
	bottom: 0;
	width: 100%;
	z-index: -1;
}

.novata .section-background img {
	width: 100%;
	display: block;
}



@media screen and (min-width: 600px) {
	
	.sirc .section-background-3 {
		height: 80vw;
		bottom: 220vw;
	}
}
@media screen and (min-width: 980px) {
	
	.sirc .section-background-3 {
		bottom: 170vw;
	}
}

.sirc .section-background-4 {
	background: #0E6371;
	height: 50vw;
	top: auto;
	bottom: 0;
	left: 0;
}

/*
	Feature statement: a pull-quote used as an editorial chapter break within a case study.
	Reuses the existing .big-p treatment (already used for the homepage's hero line) rather
	than introducing a new type scale - same font, weight and responsive steps, just given
	its own generously-padded section so it reads as a beat, not a paragraph.
*/
.section-feature-statement {
	padding: 12vw 0;
	/* These sections sit on the page's light background, not the .white text context most
	   of the surrounding case study uses, so the inherited white text needs overriding. */
	color: #000000;
}
@media screen and (min-width: 600px) {
	.section-feature-statement {
		padding: 8vw 0;
	}
}
.section-feature-statement .big-p {
	max-width: 18em;
}

/*
	Outcome number: a large before/after or headline figure (e.g. "1 -> 5 designers").
	Sized between .big-p and .project-title-big so two or three can sit together without
	competing with the oversized company-name treatment reserved for hero moments.
*/
.outcome-number {
	display: block;
	font-weight: 600;
	font-size: 12vw;
	line-height: 1.05;
	margin-bottom: 0.25em;
	/* Same inherited-white issue as .section-feature-statement: this sits on a light
	   section background (e.g. #eeeeee), not a dark one, so needs its own colour. */
	color: #000000;
}
@media screen and (min-width: 600px) {
	.outcome-number {
		font-size: 5vw;
	}
}
@media screen and (min-width: 1500px) {
	.outcome-number {
		font-size: 64px;
	}
}
.outcome-label {
	display: block;
	color: #6c6c6c;
}

/*
	"At a glance" stat row, 2026-09-30: up to 3 .outcome-number/.outcome-label pairs side by
	side, a single full-width divider between the numbers and the labels (not per-item -
	matches the reference layout Jason supplied). Uses plain flexbox rather than the col-N
	grid utilities elsewhere on the site, since the grid doesn't have a clean "thirds" class -
	stacks to one column below 600px, equal-width side by side above it.
*/
.outcome-row {
	gap: 24px;
}
.outcome-item {
	flex: 1 1 100%;
	min-width: 0;
	text-align: center;
}
@media screen and (min-width: 600px) {
	.outcome-item {
		flex: 1 1 0;
	}
}
.outcome-divider {
	height: 1px;
	background: rgba(0, 0, 0, 0.12);
	margin: 16px 0 24px;
}

/* Below 600px the numbers row and labels row would stack as two separate blocks, leaving each
   label far from its number. Flatten both rows into one grid and interleave the items
   (number 1, label 1, number 2, ...) so every pair reads together; the single divider only
   makes sense when the rows sit side by side, so it is hidden here. */
@media screen and (max-width: 599px) {
	.at-a-glance {
		display: grid;
		grid-template-columns: 100%;
	}
	.at-a-glance .outcome-row {
		display: contents;
	}
	.at-a-glance .outcome-divider {
		display: none;
	}
	.at-a-glance .outcome-row:first-of-type .outcome-item:nth-child(1) { order: 1; }
	.at-a-glance .outcome-row:last-of-type .outcome-item:nth-child(1) { order: 2; margin-bottom: 32px; }
	.at-a-glance .outcome-row:first-of-type .outcome-item:nth-child(2) { order: 3; }
	.at-a-glance .outcome-row:last-of-type .outcome-item:nth-child(2) { order: 4; margin-bottom: 32px; }
	.at-a-glance .outcome-row:first-of-type .outcome-item:nth-child(3) { order: 5; }
	.at-a-glance .outcome-row:last-of-type .outcome-item:nth-child(3) { order: 6; margin-bottom: 0; }
}

/* The "At a glance" section has no heading (removed 2026-09-30 per Jason), so unlike every
   other section here it doesn't get the bottom margin .project-section-title normally
   provides - without this, the labels row runs straight into the next section's heading. */
.at-a-glance {
	margin-bottom: 50px;
}
@media screen and (min-width: 600px) {
	.at-a-glance {
		margin-bottom: 60px;
	}
}
@media screen and (min-width: 980px) {
	.at-a-glance {
		margin-bottom: 80px;
	}
}

.section-user-experience {
	margin-top: -15vw;
}
@media screen and (min-width: 600px) {
	
	.section-user-experience {
		margin-top: -18vw;
	}
}
@media screen and (min-width: 980px) {
	
	.section-user-experience {
		margin-top: -200px;
	}
}
@media screen and (min-width: 980px) {
	
	.section-user-experience p {
		margin-bottom: 40px;
	}
}

.section-user-experience .user-experience-step {
	position: relative;
	padding-top: 50px;
}
@media screen and (max-width: 599px) {
	
	.section-user-experience .user-experience-step >
	div.col-s-4 {
		margin-right: 0;
	}
}
@media screen and (min-width: 600px) {
	
	.section-user-experience .user-experience-step {
		padding-top: 100px;
	}
}
@media screen and (min-width: 980px) {
	
	.section-user-experience .user-experience-step {
		padding-top: 150px;
	}
}

.section-user-experience .user-experience-step.step-even .animate-line {
	position: absolute;
	top: 0;
	right: 33vw;
	transform: translateY(-40%);
	z-index: -1;
}

.section-user-experience .user-experience-step.step-odd .animate-line {
	position: absolute;
	top: 0;
	right: auto;
	left: 17vw;
	transform: translateY(-40%);
	z-index: -1;
}

.section-user-experience .user-experience-step:last-of-type .step-icon svg {
	margin: auto 9px auto auto;
}
@media screen and (max-width: 1279px) {
	
	.animate-line.first {
		display: none;
	}
}





.section-hah .section-background {
	width: 100vw;
	height: 130vw;
	background: #E6E6E6;
	position: absolute;
	left: 0;
	top: 320vw;
	z-index: -1;
}
@media screen and (min-width: 600px) {
	
	.section-hah .section-background {
		top: 280vw;
	}
}
@media screen and (min-width: 980px) {
	
	.section-hah .section-background {
		top: 260vw;
		height: 130vw;
	}
}

.section-hah .section-background-2 {
	background: #2F2F2F;
	height: 300vw;
	top: auto;
	bottom: 230vw;
	left: 0;
}
@media screen and (min-width: 600px) {
	
	.section-hah .section-background-2 {
		bottom: 180vw;
		height: 260vw;
	}
}

.section-hah .phones .phones-margin-top {
	margin-top: 25vh;
}


.background-transition {
	position: absolute;
	width: calc( 5.5vw*2 + 2.6vw);
	height: 440px;
	top: calc(50vh - 266px + 91px);
	left: calc(5.5vw + 2.6vw + 2.6vw);
	opacity: 0;
	transform-origin: center center;
	transform: scale3d(1, 1, 1);
	transition: transform 1s cubic-bezier(0.91, 0.03, 0.12, 1);
}

.background-transition.visible {
	opacity: 1;
	z-index: 4;
	transform: scale3d(16, 3, 1);
}

.project-0 .background-transition {
	background: #056096;
}

.project-1 .background-transition {
	background: #147A62;
}

.project-2 .background-transition {
	background: #786EA8;
}

.project-3 .background-transition {
	background: #C65029;
}
/*
.project-5 .background-transition {
	background: #9d538c;
}
.project-6 .background-transition {
	background: #66abba;
}*/
@keyframes moveToLeft {
	from {
		transform: translate3d(0, 0, 0);
	}
	to {
		transform: translate3d(-16.2vw, 0, 0);
	}
}
@keyframes moveToRight {
	from {
		transform: translate3d(-16.2vw, 0, 0);
	}
	to {
		transform: translate3d(0, 0, 0);
	}
}

body, html {
	font-size: 14px;
}
@media screen and (min-width: 980px) {
	
	body, html {
		cursor: none !important;
		font-size: 16px;
	}
}

* {
	box-sizing: border-box;
}

body {
	overflow: hidden;
	font-family: "NeueHaasDisplay", sans-serif;
	color: #6e6e6e;
	background: white;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

body.ov-visible {
	overflow: visible !important;
}

#skrollr-body {
	width: 100%;
	height: 100%;
}

.preload * {
	-webkit-transition: none !important;
	-moz-transition: none !important;
	-ms-transition: none !important;
	-o-transition: none !important;
}
@media screen and (min-width: 1025px) {
	
	* {
		cursor: none;
	}
	
	.cursor {
		position: absolute;
		width: 10px;
		height: 10px;
		border: 5px solid grey;
		transform: translate3d(-50%, -50%, 0) scale(1);
		transition: 0.3s cubic-bezier(0.91, 0.03, 0.12, 1) transform, 0.3s cubic-bezier(0.91, 0.03, 0.12, 1) border;
		user-select: none;
		pointer-events: none;
		z-index: 10000;
		border-radius: 100%;
		box-sizing: border-box;
		transform-origin: center center;
	}
	
	.cursor::after {
		content: "";
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate3d(-50%, -50%, 0);
		border-radius: 100%;
		background: red;
		width: 0px;
		height: 0px;
		transform-origin: center center;
		transition: all 0.6s cubic-bezier(0.75, -1.27, 0.3, 2.33);
	}
	
	.cursor.active {
		border: 1px solid grey;
		transform: translate3d(-50%, -50%, 0) scale(2);
	}
	
	.cursor.hovered {
		opacity: 0.08;
	}
}