/*! modern-normalize v3.0.1 | MIT License | https://github.com/sindresorhus/modern-normalize */
*,::after,::before{box-sizing:border-box}html{font-family:system-ui,'Segoe UI',Roboto,Helvetica,Arial,sans-serif,'Apple Color Emoji','Segoe UI Emoji';line-height:1.15;-webkit-text-size-adjust:100%;tab-size:4}body{margin:0}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Consolas,'Liberation Mono',Menlo,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{border-color:currentcolor}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}legend{padding:0}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}

/* Vars */
:root {
	--font-body: 'Google Sans', sans-serif;
	--font-headings: 'Instrument Serif', serif;
	--font-mono: 'IBM Plex Mono', monospace;
	--color-bg: #fff;
	--color-dark: #333;
	--color-btn-bg: #f7f7f4;
	--color-light: #f2f2f2;
	--color-text-light: #999999;
	--color-text-med: #666666;
	--color-text-dark: #333333;
	--color-accent: #b5ff00;
	--color-border: #999999;
	--grad-accent: linear-gradient(0deg,rgba(181, 255, 0, 1) 20%, rgba(247, 247, 244, 1) 60%, rgba(255, 255, 255, 1) 100%);
	--grad-accent-inv: linear-gradient(180deg,rgba(181, 255, 0, 1) 20%, rgba(247, 247, 244, 1) 60%, rgba(255, 255, 255, 1) 100%);
	--grad-grey: linear-gradient(180deg,rgba(255, 255, 255, 1) 0%, rgba(247, 247, 244, 1) 66%);
	--max-width: 85.375rem;
	interpolate-size: allow-keywords;
}

/* Utils */

@media (prefers-reduced-motion: no-preference) {
	html:focus-within {
		scroll-behavior: smooth;
	}
}

@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}
}  

@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;
		transition: none !important;
	}
}  

:where(input, button, textarea, select),
:where(input[type="file"])::-webkit-file-upload-button {
	color: inherit;
	font: inherit;
	font-size: inherit;
	letter-spacing: inherit;
	word-spacing: inherit;
}

.is-hidden {
	display: none;
	opacity: 0;
}

.is-invisible {
	visibility: hidden;
}

/* Styles */

body {
	font-family: var(--font-body);
	font-optical-sizing: auto;
	font-weight: 400;
	font-style: normal;
	font-variation-settings:
    "GRAD" 0;
   color: var(--color-text-dark);
}

/* Layout */

header, main, footer {
	display: grid;
	grid-template-columns: 
  [full-start] minmax(1.625rem, 1fr) 
  [main-start] minmax(0, 1fr)
  [narrow-start] minmax(0,1fr)
  [central-start] minmax(16.75rem, var(--max-width)) [central-end]
  minmax(0,1fr) [narrow-end]
  minmax(0, 1fr) [main-end]
  minmax(1.625rem, 1fr) [full-end];
  @media screen and (min-width: 60em) {
  	grid-template-columns: 
  	[full-start] minmax(7.625rem, 1fr) 
  	[main-start] minmax(0, 7.625rem) 
  	[narrow-start] minmax(0, 7.625rem) 
  	[central-start] minmax(0, 44.25rem) [central-end]
  	minmax(0, 7.625rem) [narrow-end]
  	minmax(0, 7.625rem) [main-end]
  	minmax(7.625rem, 1fr) [full-end];
  }
}

header > *, main > *, footer > * {
  	grid-column: main;
}

main {
	position: relative;
}

.lo-full {
	display: inherit;
	grid-column: full;
	grid-template-columns: inherit;
}

.container {
  grid-column: main;
}

.narrow {
	grid-column: narrow;
}

.central {
	grid-column: central;
}

.staggered-3-7 {
	grid-column-start: 3;
	grid-column-end: 7;
}

/* End layout */

b, strong {
	font-weight: 600;
}

i {
	font-style: italic
}

h1, h2, h3, h4 {
	font-family: var(--font-headings);
	font-weight: 400;
}

p {
	line-height: 1.5;
}

.btn-wrap {
	margin-top: 1.75rem;
}

.btn-cta {
	background: var(--color-btn-bg);
	color: var(--color-text-dark);
	padding: 0 1.625rem;
	transition: all ease-out 0.3s;
	font-size: 0.75rem;
	line-height: 3em;
	display: inline-block;
	letter-spacing: 0.1em;
	&:hover {
		text-decoration: none;
		background: var(--color-accent);		
	}
}
.btn-accent {
	border-color: var(--color-accent);
}
.btn-inv {
	color: var(--color-light);
	&:hover {
		color: var(--color-text-dark);
	}
}

.latitude, .eyebrow, .longitude, .header-utils, .type-mono {
	font-family: var(--font-mono);
	text-transform: uppercase;
}
.btn-cta, .btn-cta-simple, .btn-call {
	text-transform: uppercase;
	font-weight: 700;
}
.eyebrow {
	font-size: 0.625rem;
	letter-spacing: .1rem;
	color: var(--color-text-light);
	.accent {
		display: inline-block;
		color: var(--color-accent);
		padding: 0 .2rem;
	}
	&.small {
		font-size: 0.625rem;
		letter-spacing: 0;
	}
	@media screen and (min-width: 60em) {
		font-size: 0.75rem;
		&.small {
		font-size: 0.625rem;
	  }
	}
}

.eyebrow + h2, .eyebrow + h3 {
	margin-top: 1.125rem;
	font-size: clamp(1.875rem, 1.5325rem + 1.7123vw, 2.8125rem);
	@media screen and (min-width: 60em) {
		margin-top: 1.625rem;
	}
}

h3:has(+.btn-wrap) {
	margin-bottom: 1.5rem;
}

.lang {
	list-style: none;
	display: flex;
	padding: 0;
	margin: 0;
	gap: 1rem;
}

a {
	text-decoration: none;
	color: var(--color-text-light);
	transition: all 0.25s ease-out;
	&:hover {
		text-decoration: underline;
	}
}

h1, h2, p {
	color: var(--color-text-dark);
}

.text-light p {
	color: var(--color-text-light);
}

.btn-cta-simple {
	text-decoration: none;
	font-size: 0.75rem;
	letter-spacing: 0.1rem;
	svg {
		margin-right: .6rem;
		transition: fill 0.2s ease;
		display: inline-block;
		vertical-align: middle;
	}
	&.col-k {
		color: var(--color-text-dark);
		svg {
			fill: var(--color-text-dark);
		}
	}
	&.col-w {
		color: var(--color-light);
		svg {
			fill: var(--color-light);
		}
	}
	&:hover {
		text-decoration: none;
		svg {
			fill: var(--color-accent);
		}
	}
}

footer {
	padding: 2.875rem 0;
	background: var(--grad-accent-inv);
	font-size: 0.75rem;
	a {
		color: var(--color-text-dark);
	}
	.eyebrow {
		margin: 0 0 1.5rem;
	}
	.info {
		a, p:not(.eyebrow) {
			letter-spacing: .1rem;
			text-transform: uppercase;
		}
	}
	.social {
		list-style: none;
		display: flex;
		gap: 1rem;
		padding: 0;
	}
	.footer-info {
		font-size: 0.625rem;
	}

	.info {
			margin: 3.875rem 0 2rem;
			display: grid;
			grid-template-areas: "nav contact"
			"legal legal"
			"logo logo";
			grid-template-columns: 30% 65%;
			gap: 3.125rem 5%;
		}

	.footer-logo {
		grid-area: logo;
	}

	.footer-contact {
		grid-area: contact;
	}

	.footer-nav {
		grid-area: nav;
		ul {
			display: flex;
			justify-content: space-between;
			flex-direction: column;
			gap: 1.125rem;
			list-style: none;
			padding: 0;
			text-transform: uppercase;
			margin: 0;
			font-size: 0.75rem;
		}
	}

	.footer-legal {
		grid-area: legal;
	}

	.footer-info {
		grid-area: info;
	}

	.btn-cta {
		margin-bottom: 1rem;
	}

	@media screen and (max-width: 28em) {
		.info {
				margin: 3.875rem 0 2rem;
				display: grid;
				grid-template-areas: "nav"
				"contact"
				"legal"
				"logo";
				grid-template-columns: 1fr;
				gap: 3.125rem 5%;
			}
	}

	@media screen and (min-width: 60em) {
		padding: 5.5rem 0;
		.eyebrow {
			margin: 0 0 2.188rem;
		}
		.info {
			margin: 3.875rem 0 5rem;
			grid-template-areas: "logo nav contact legal";
			grid-template-columns: 20% 16% 30% 22%;
			gap: 4%;
		}
		.footer-nav, .footer-logo {
			display: block;
		}
		.footer-logo {
			place-self: end stretch;
			img {
				width: 100%;
				height: auto;
			}
		}
		.footer-contact {
			p {
				margin-top: 0;
			}
		}
		.footer-legal {
			font-size: 0.75rem;
		}
		.footer-info {
			grid-area: info;
			font-size: 0.75rem;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			p {margin-top: 0}
			p:last-of-type {
				margin-bottom: 0;
			}
		}
		.btn-cta {
			font-size: 0.625rem;
		}
	}
	@media screen and (min-width: 75em) {
		.info {
			grid-template-areas: "logo . nav . contact legal";
			grid-template-columns: 28.59% 8.19% 8.19% 8.19% 18.31% 18.31%;
			gap: 2%;
		}
	}
}

.contact {
	display: block;
	position: relative;
	p {
		font-size: 1.125rem;
	}
	.eyebrow {
		color: var(--color-text-dark);
	}
	.btn-cta {
		font-size: 0.75rem;
		background: #fff;
		margin-right: .5rem;
	}
	h3 {
		line-height: 1.06;
		margin: 1.375rem 0;
		padding-right: 4rem;
	}
	.mark {
		width: 3.125rem;
		height: auto;
		position: absolute;
		top: 0;
		right: 0;
	}
	@media screen and (min-width: 60em) {
		padding-bottom: 9.125rem;
		text-align: left;
		.mark {
			height: 12.5rem;
			width: auto;
			position: absolute;
			right: 5.313rem;			
		}
		h3 {
			margin: 1.5rem 0;
			padding: 0;
		}
		p {
			max-width: 45ch;
			text-wrap: balance;
		}
	}
}

.header-utils {	
	background: var(--color-light);
	color: var(--color-text-light);
	.container {	
	display: flex;
	padding: 0.75rem 0;
	font-size: 0.75rem;
	justify-content: space-between;
	}
	@media screen and (max-width: 60em) {
		.container {justify-content: flex-end;}
		.timezones {display: none;}
	}
}

.timezones {
	display: flex;
	box-sizing: border-box;
	gap: .5rem;
	align-items: center;
	line-height: 1;

	.time:not(:last-child)::after {
  	content: '|';
  	margin-left: 2px;
	}
}

.main-nav {
	ul {
		list-style: none;
		padding: 0;
	}
	a {
	text-transform: uppercase;
	color: var(--color-text-dark);
	font-weight: 400;
	letter-spacing: .1em;
	line-height: 2.5rem;
	display: inline-block;
	}
}

.btn-call {
		font-size: 0.625rem;
		padding: 0 1rem;
	}

@media screen and (max-width: 74em) {
	header {
		.mark {
			display: none;
		}
		.logo {
			width: 7rem;
			height: auto;
			transition: all 0.25s ease-out;
		}
	}
	.header-main {
		display: grid;
		grid-template-columns: 3rem 1fr 1fr;
		justify-content: space-between;
		padding: 0.625rem 0 0.875rem;
		align-items: center;
		justify-items: start;
	}
	.btn-call {
		justify-self: end;
	}
	.main-nav {
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		height: 100dvh;
		z-index: 4;
		background: #fff;
		display: block;
		transition: max-height 0.25s ease-out;
		font-size: 0.813rem;

		&.is-closed {
			max-height: 0;
			overflow: hidden;
			display: none;
		}

		ul {
			margin: 1.2rem 2rem 2rem;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			align-content: center;
			text-align: center;

			&::before {
				content: '';
				background: url(/img/brandatlas-logotype.svg) no-repeat;
				background-size: 9.25rem auto;
				display: block;
				width: 9.25rem;
				height: 2rem;
				margin: 2rem auto 2rem;
			}

			a {
				display: block;
				line-height: 3.5rem;
			}
		}
	}
	.btn-nav, .btn-close {
		border: 0;
		background: none;
		height: 1.625rem;
		vertical-align: middle;
	}
	.btn-close {
		position: absolute;
		top: 3.7rem;
		right: 1.75rem;
	}
}

@media screen and (min-width: 74em) {
	.btn-nav, .btn-close {display: none;}
	.main-nav {
		font-size: 0.75rem;
		justify-self: center;
		ul {
			list-style: none;
			display: flex;
			padding: 0;
			position: relative;
			&::before {
				content: url(/img/ic-nav-hover.svg);
				position: absolute;
				position-anchor: --active;
				left: anchor(center);
				top: calc( anchor(top) - 2.6rem );
				transform: translateX(-50%);
				opacity: 0;
				visibility: hidden;
				transition: top 0.3s ease, left 0.3s ease, opacity 0s linear 0s, visibility 0s linear 0s;
			}
			&:has(:hover, :focus-visible, .is-active)::before {
			    opacity: 1;
			    visibility: visible;
			}
			li:hover, li:has(a:focus-visible), li.is-active {
				anchor-name: --active;
			}
			&:has(li:hover) li.is-active:not(:hover) {
  			anchor-name: none;
			}
			a {
				padding: 0 0.875rem;
				&:hover {
					text-decoration: none;
				}
			}
		}
	}

	.header-main {		
		display: grid;
		grid-template-columns: 22% 1fr 15% 6%;
		width: 100%;
		align-items: baseline;
		padding: 1.875rem 0;

		.logo {
			justify-self: start;
			width: 8.125rem;
		}
	}
	.btn-call, .mark {
		justify-self: end;
	}
	.mark {
		align-self: center;
	}
}

.latitude, .longitude {
	position: absolute;
	left: -11.4rem;
	top: 8rem;
	list-style: none;
	display: flex;
	justify-content: space-between;
	transform: rotate(-90deg);
	text-align: right;
	color: #b3b3b3;

	img {
		margin: 0 .8rem;
	}
}
/*@media screen and (max-width: 92em) {
		.latitude, .longitude {
			left: -12rem;
		outline: 1px solid orange;
	}
}*/
@media screen and (max-width: 60em) {
	.latitude, .longitude {display: none;}
}

main > .latitude, main > .longitude {
	@media screen and (max-width: 94em) {
		left: -3.4rem;
	}
}

.latitude {
	top: 32rem;
	text-align: left;
}

.about { 
	.longitude {
		top: 20%;
	}
	.latitude {
		top: unset;
		bottom: 20%;
	}
}

ul.eyebrow {
	margin: 0;
	padding: 0;
	list-style: none;
	@media screen and (min-width: 60em) {
		display: flex;
		flex-wrap: wrap;
		li::before {
			content: '•';
			display: inline-block;
			color: var(--color-accent);
			padding: 0 .3rem;
		}
		li:first-child::before {
			content: none;
		}
	}
}
.eyebrow a {
	color: var(--color-text-light);
	text-decoration: none;
	&:hover {
		color: var(--color-text-med);
		text-decoration: underline;
	}
}



/* Home */

.hero {
	background: var(--color-dark) url(/img/temp-hero.jpg) center no-repeat;
	background-size: cover;
	text-align: left;
	padding-top: 2.375rem;
	padding-bottom: 3.25rem;
	h1 {
		font-size: clamp(1.875rem, 0.5508rem + 6.621vw, 5.5rem);
		line-height: .97;
		margin: 1.8rem 0 2.25rem;
		color: var(--color-light);
	}
	p, .eyebrow, h1 {color: var(--color-light);}
	p {
		line-height: 1.6;
	}
	.btn-wrap {
		margin-top: 3.438rem;
	}
	.container {
		padding: 0 6.66%;
	}
	
	@media screen and (min-width: 60em) {
		padding-top:6.25rem;
		padding-bottom:5rem;
		.container {
			padding: 0 30% 0 0;
		}
		p {
			font-size: 1.125rem;
			text-wrap: balance;
		}
	}
}

.about {
	padding: 2rem 0 2.625rem;
	position: relative;
	display: flex;
	flex-direction: column;
	align-content: center;
	gap: 2.5rem;

	.gr {
		order: -1;
	}

	p {
		max-width: 75ch;
		margin-left: auto;
		margin-right: auto;
	}

	.btn-cta {
		margin-top: 2.25rem;
	}

	@media screen and (min-width: 60em) {
		flex-direction: row;
		gap: 10.34%;
		padding: 8.125rem 0 4.75rem;
		.gr {
			width: 42.85%;
			height: auto;
			align-self: flex-start;
		}
		.content {
			width: 48.84%;
		}
		.btn-cta {
			margin-top: 5rem;
		}
	}
}

.expertise {
	padding: 2rem 0 2.625rem;
	text-align: center;

	.central p {
		/*font-size: 0.75rem;*/
		max-width: 44.25rem;
		margin-left: auto;
		margin-right: auto;
	}
	.blocks {
		list-style: none;
		display: flex;
		flex-wrap: wrap;
		padding: 0;
		justify-content: space-between;
		flex-direction: column;
		gap: 1rem;

		li {
			border: 1px solid #f2f2f2;
			background: var(--color-accent);
			transition: all 0.25s ease-out;

			&:hover {
				background: var(--color-accent);
				* {color: var(--color-text-dark);}
			}

			a {
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				text-decoration: none;				
				padding: 2rem;
				
				p {
					color: var(--color-text-dark);
					max-width: 70%;
				}

				span {
					font-size: 0.75rem;
					color: var(--color-text-dark);
				}

				.txt {
					margin-top: 0;
				}

				.link-wrap {
					margin-bottom: 0;
					text-transform: uppercase;
					letter-spacing: 0.1em;
					font-size: 0.75rem;
					font-weight: 700;
				}
			}
		}
		h3 {
			font-size: clamp(1.875rem, 1.5325rem + 1.7123vw, 2.8125rem);
			font-style: italic;
			margin: 1.375rem 0;
			line-height: 1.07;
			color: var(--color-text-dark);
		}
	}
	@media screen and (min-width: 60em) {
		p {
			font-size: 1rem;
		}
		.blocks {
			margin: 4.5rem auto 6.125rem;
			flex-wrap: nowrap;
			flex-direction: row;
			li {
			border: 1px solid #f2f2f2;
			background: #fff;
			flex: 31.94% 0 0;
				& > a {
					aspect-ratio: 1 / 1;
					padding: 6.875rem 2rem 7.5rem;
					p {
						color: var(--color-text-med);
					}
				}
			}
			h3 {
			margin: 1.5rem 0;
			}
			
		}
	}
}

.clients {
	padding: 4rem 0;
	background: var(--color-btn-bg);
	text-align: center;
	flex-direction: column;
	display: inherit;
	&.lite {
		background: #fff;
	}
	.container {
		position: relative;
	}
	h3 {
		line-height: 1.06;
	}
	@media screen and (min-width: 60em) {
		padding: 6.125rem 0 7.5rem;
		.text {
			width: 60%;
			text-align: left;
		}
	}
	.carousel-simple {
		margin-top: 6rem;
		list-style: none;
		padding: 0;
		display: flex;
		gap: 6rem;
		overflow-inline: auto;
		overscroll-behavior-inline: contain;
		scroll-snap-type: inline mandatory;
		@media (prefers-reduced-motion: no-preference) { 
		    scroll-behavior: smooth;
		}
		li {
		  flex: 0 0 15%;
		  place-content: center;
		  text-align: center;
		  scroll-snap-align: center;
		}
		img {
			max-width: 8.75rem;
			height: auto;
		}
		scrollbar-width: none;		  
	}
	.carousel-simple-buttons {
		position: absolute;
		right: 0;
		top: .2rem;
		button {
		border: none;
		background: none;
		svg {fill: #999;}
		&:hover {
			svg {fill: var(--color-accent);}
		}		
	}
	}
}

/* Journal */


.journal {
	padding: 2.875rem 0;
	text-align: center;
	position: relative;

	.entry-featured {
		display: flex;
		flex-direction: column;
		text-align: left;
		margin: 2.5rem 0 3rem;

		.content, .gr {
			flex: 100% 0 0;
		}

		.gr {
			order: -1;
			margin-bottom: 2.125rem;
			img {
				width: 100%;
				height: auto;
			}
		}

		h2, h4 {
			font-size: clamp(1.5rem, 1.3174rem + 0.9132vw, 2rem);
			a {
				color: var(--color-text-dark);
			}
		}
		h4 {
			margin-top: 0;
		}
	}

	.entry-list {
		.pag {
			text-align: left;
		}
	}

	.entry-list-single {
		border-top: 1px solid var(--color-light);
		position: relative;
		display: flex;
		flex-wrap: nowrap;
		gap: 1rem;
		padding: 2.188rem 0 2rem;
		justify-content: space-between;
		&::after {
			content: '';
			background: url(/img/ic-entry-arrow.svg);
			display: block;
			opacity: .37;
			position: absolute;
			right: 0;
			top: 2rem;
			width: 1.2rem;
			height: 1.2rem;
		}
		&:hover::after {
			opacity: 1;
		}
		.content {
			flex: 51.11% 0 0;
			text-align: left;
		}
		.gr {
			flex: 42.77% 0 0;
			padding-top: 2px;
			margin-top: 3rem;
			img {
					width: 100%;
					height: auto;
			}
		}
		h3 {
			font-size: clamp(1.5rem, 1.3174rem + 0.9132vw, 2rem);
			margin-top: 1.5rem;
			a {
				color: var(--color-text-dark);
				text-decoration: none;
				&:hover {
					text-decoration: underline;
				}
			}
		}
	}
	@media screen and (min-width: 60em) {
		padding: 5.5rem 0 12rem;
		.narrow {
			text-align: center;
		}
		.entry-featured {
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			margin: 5.625rem 0;
			gap: 12.64%;

			.content {
				flex: 38.52% 0 0;
			}

			.gr {
				flex: 48.84% 0 0;
				order: 0;
				img {
					width: 100%;
					height: auto;
				}
			}
		}
		.entry-list {
			margin: 12.375rem 0 0;
			.pag {
				margin-top: 7.875rem;
			}
		}
		.entry-list-single {
			padding: 2.188rem 12.84% 2.375rem 0;
			&::after {
				top: 2.188rem;
			}
			.content {
				flex: 61.68% 0 0;
			}
			.gr {
				flex: 20% 0 0;
				margin-top: 0;
			}
		}
	}
}

.work-grid-heading {
	align-items: center;
	margin: 3.5rem 0 ;
	display: block;
	@media screen and (min-width: 60em) {
		margin: 7.5rem 0 3.5rem;
		text-align: center;
	}
}

/*.projects-preview {
	align-items: center;
	margin: 3.5rem 0 ;
	display: block;
	@media screen and (min-width: 60em) {
		margin: 7.5rem 0 3.5rem;
		.narrow {
			text-align: center;
		}
	}
}*/

/*hscroll-slider {
	display: block;
	width: 100vw;
}*/

.project-list {
	width: 100%;
	display: flex;
	overflow-inline: auto;
	overscroll-behavior-inline: contain;
	scroll-snap-type: inline mandatory;
	gap: 1.66%;
	margin: 1.75rem 0;
	@media (prefers-reduced-motion: no-preference) {
		scroll-behavior: smooth;
		margin: 3.75rem 0;
	}

	.project-summary {
		flex:70% 0 0;
		position: relative;
		aspect-ratio: 5 / 6;
		@media screen and (min-width: 60em) {
			flex: 40.69% 0 0;
		}
		img {
			width: 100%;
			height: 100%;
			object-fit: cover;
			display: block;
		}
		a {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			padding: 2rem;
			text-align: center;
			background-color: rgba(0, 0, 0, 0.5);
			color: #fff;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			align-content: center;
			font-family: var(--font-body);
			text-transform: uppercase;
			letter-spacing: 0.1rem;
			&:hover {
				text-decoration: none;
			}
		}
		p {
			color: #fff;
			font-size: 0.625rem;}
		.tags {
			order: -1;
		}
		h4 {
			font-family: var(--font-body);
			font-size: 1.563rem;
			font-weight: 500;
			text-wrap: pretty;
		}
		@media (hover: hover) {
			a {
				opacity: 0;
			}
			&:hover a {
				opacity: 1;
			}
		}
	}
}

/* About */

.about-hero {
	text-align: center;
	padding: 2.5rem 0 1rem;
	h1 {
		font-size: clamp(3rem, 2.0868rem + 4.5662vw, 5.5rem);
	}
	p {
		font-size: clamp(1rem, 0.9543rem + 0.2283vw, 1.125rem);
	}
	@media screen and (min-width: 60em) {
		padding: 8rem 0 5rem;
	}
}

details {
	border-top: 1px solid var(--color-light);
  interpolate-size: allow-keywords; 
  background: url(/img/ic-details-closed.svg) right 2rem no-repeat;
  &::details-content {
    block-size: 0;
    max-height: 0;
    overflow: hidden;
    @media (prefers-reduced-motion: no-preference) {
      transition: all 0.25s ease-in;
      transition-behavior: allow-discrete;
    }
  }
  &[open] {
  	background-image: url(/img/ic-details-open.svg);
  }
  &[open]::details-content {
    block-size: auto;
    max-height: 60rem;
  }
  div {
  	margin-bottom: 2.5rem;
  }
  p {
  	margin-top: 0;
  }
  p, ul {
  	color: var(--color-text-light);
  }
}
summary {
	padding: 2.5rem 2rem 2.5rem 0;
	list-style: none;
	&::marker {
		 content: "";
	}
}

.about-points {
	margin: 2rem 0 4rem;
	 div {
	  text-align: center;
	 }
	 p {
	  text-align: left;
	  max-width: 29em;
	  margin-left: auto;
	  margin-right: auto;
	 }
	summary {
		text-transform: uppercase;
		letter-spacing: 0.1rem;
		font-size: clamp(1rem, 0.863rem + 0.6849vw, 1.375rem);
	}
	@media screen and (min-width: 60em) {
		margin: 2rem 0 5rem;
	}
}

.about-founders {
	padding: 4rem 0;
	background: var(--grad-grey);

	.profiles {
		text-align: left;
		display: flex;
		flex-direction: column;
		gap: 5.75rem;
	}

	.profile-single {
		h3 {
			font-size: 2.813rem;
			font-style: italic;
			margin: 1rem 0 1.5rem;
		}
		img {
			width: 100%;
			height: auto;
		}
	}

	@media screen and (min-width: 40em) and (max-width: 90em) {
		.central {
			grid-column: narrow;
		}
	}

	@media screen and (min-width: 40em) {
		padding: 9.5rem 0;
		text-align: center;

		.profiles {
			flex-direction: row;
			gap: 0;
			justify-content: space-between;
		}
		.profile-single {
			flex: 48.02% 0 0;
			h3 {
				margin: 4.5rem 0 2.25rem; 
				span {
					display: block;
				}
			}
		}
	}
}

/* Creativity */
.hero.creativity, .hero-development, .hero-advisor {
	.eyebrow {color: var(--color-accent);}
}

.creativity-details {
	margin: 4rem 0;
	position: relative;
	div {
		text-align: center;
	}
	summary {
		font-size: clamp(3rem, 2.0868rem + 4.5662vw, 5.5rem);
		font-family: var(--font-headings);
	}
	p {
		text-align: left;
	}
	ul {
		color: var(--color-text-med);
		text-align: left;
		margin: 3rem auto 0;
		max-width: 29em;
		line-height: 1.6;
		::marker {
			color: var(--color-accent);
		}
	}
	@media screen and (min-width: 60em) {
		margin: 6rem 0;
	}
}

/* Development */

.development-detail {
	margin: 3.5rem 0 ;
	@media screen and (min-width: 60em) {
		margin: 7.5rem 0 3.5rem;
	}
}

.projects-preview.development {
	h2 {
		font-size: clamp(1.875rem, 0.5508rem + 6.621vw, 5.5rem);
	}
	p {
		color: var(--color-text-light);
	}
	@media screen and (min-width: 60em) {
		.central {
			text-align: center;
			margin-bottom: 5rem;
		}
	}
}

.development-details {
	background: var(--color-text-med);
	padding: 3rem 0;
	* {color: #fff !important;}
	margin: 0;
	h3 {
		font-size: clamp(1.875rem, 0.5508rem + 6.621vw, 5.5rem);
	}
	.central {
		margin-bottom: 3rem;
		p {
			color: var(--color-text-light);
		}
	}
	.col-a {
		text-align: center;
	}
	.col-b {
		display: none;
	}
	svg {
				width: 100%;
				height: auto;
				max-width: 35rem;
				margin: 0 auto;
			}
	summary {
		text-transform: uppercase;
		letter-spacing: 0.1rem;
		font-size: clamp(1rem, 0.863rem + 0.6849vw, 1.375rem);
	}
	details {background-image: url(/img/ic-details-closed-dark.svg)}
  details[open] {background-image: url(/img/ic-details-open-dark.svg);}
	@media screen and (min-width: 60em) {
		.central {
			text-align: center;
			margin-bottom: 6.25rem;
			p {
				max-width: 44.25rem;
				margin-left: auto;
				margin-right: auto;
			}
		}
		.cols {
			display: flex;
			justify-content: space-between;
		}
		.col-a {
			flex: 47% 0 0;
			text-align: left;
		}
		.col-b {
			display: block;
			flex: 47% 0 0;
		}
		details {
			div {
				text-align: center;
			}
			p {
				margin-left: auto;
				margin-right: auto;
				max-width: 36.563rem;
				text-align: left;
			}
			ul {
				text-align: left;
				line-height: 1.5;
			}
		}
	}
}

/* Graph */
.graph .zone {
	.arc, .txt {transition: all 0.2s ease;}
	.txt {
		opacity: 0;
	}
	&:hover, &.is-on {
		.arc {
		stroke-width: 27;
  	filter: saturate(1.35) brightness(1.12) drop-shadow(0 0 10px rgba(181, 255, 0, .4));
  	}
  	.txt {
  		opacity: 1;
  	}
	}
}

/* Advisor */

.advisor-details {
	margin: 1.875rem 0;
	summary {
		text-transform: uppercase;
		letter-spacing: 0.1em;
		font-size: clamp(1rem, 0.863rem + 0.6849vw, 1.375rem);
	}
	details {
		div {
			text-align: center;
		}
		p {
			margin-left: auto;
			margin-right: auto;
			max-width: 36.563rem;
			text-align: left;
			color: var(--color-text-light);
		}
	}
	@media screen and (min-width: 60em) {
		margin: 6.25rem 0;
	}
}

.expertise.advisor {
	background: var(--grad-grey);
}

.blocks.advisor-blocks {
	grid-column: main;
	li {
		border: none;
		background: var(--grad-accent);
		a {
			display: grid;
			grid-template-columns: repeat(1, 1fr);
			grid-template-rows: 7rem 1fr 3rem;
			justify-content: start;
			align-content: space-between;
			text-align: left;
			padding: 4rem;
			p {
				max-width: none;
			}
			.link-wrap {
				text-align: left;
				width: 100%;
			}
		}
	}
	@media (hover: hover) {
		li {
			background: #fff;
			.txt {
				color: var(--color-text-light);
			}
			&:hover {
				background: var(--grad-accent);
				.txt {
					color: var(--color-text-dark);
				}
				.link-wrap svg {
					fill: #fff;
				}
			}
		}
	}
}

/* Work */

.work-heading {
	text-align: center;
	padding: 2.875rem 0 0;
	h1 {
		font-size: clamp(3rem, 2.0868rem + 4.5662vw, 5.5rem);
		margin-top: 0;
	}
	@media screen and (min-width: 60em) {
		padding: 5.5rem 0 0;
	}
}

.cat-list {
	list-style: none;
	margin: 0;
	padding: 0;
	text-transform: uppercase;
	letter-spacing: 0.1rem;
	display: flex;
	justify-content: center;
	gap: 1rem 2rem;
	font-weight: bold;
	text-align: center;
	font-size: 0.75rem;
	flex-wrap: wrap;
	a {
		color: var(--color-text-light);
		transition: all 0.2 ease;
	}
	a:hover, .is-active a {
		color: var(--color-text-dark);
		text-decoration: none;
	}
	@media screen and (max-width: 60rem) {
		li:first-of-type {
			flex-basis: 100%;
		}
	}
}

.work-grid {
	margin-bottom: 3rem;
}

.work-entry-list {
	margin: 3.5rem 0;
	display: grid;
	grid-template-columns: 1fr;
	gap: 3rem;
	text-transform: uppercase;
	.work-entry:hover {
	 	img {
			scale: 1.1;
			filter: brightness(.5);
		}
		.img::after {
			opacity: 1;
		}
	}
	.img {
		display: block;
		width: 100%;
		aspect-ratio: 1 / 1;
		overflow: hidden;
		position: relative;
		&::after {
			content: url(/img/ic-arrow-indicator.svg);
			position: absolute;
			right: 0;
			top: 50%;
			transform: translateY(-50%);
			opacity: 0;
			transition: all 0.2s ease;
		}
		img {
			max-width: 100%;
			object-fit: cover;
			object-position: center;
			transition: all 0.2s ease;
		}
	}
	
	.lat-long {
		font-family: var(--font-mono);
		color: var(--color-text-light);
		font-size: 0.625rem;
	}
	h2 {
		letter-spacing: 0.1rem;
		font-family: var(--font-body);
		margin: 1.125rem 0 0.938rem;
		font-weight: 500;
	}
	a {
		color: var(--color-text-dark);
	}
	.cat {
		font-size: 0.625rem;
		letter-spacing: 0.1rem;
		color: var(--color-text-med);
	}
	@media screen and (min-width: 45rem) {
		grid-template-columns: repeat(2, 1fr);
	}
	@media screen and (min-width: 80rem) {
		margin: 4.75rem 0;
		grid-template-columns: repeat(3, 1fr);
		gap: 3rem 1.5rem;
		h2 {
			margin: 1.75rem 0 1.25rem;
		}
	}
}

/* Project */

.project main {
	background: linear-gradient(180deg,rgba(223, 249, 156, 1) 0%, #fafaf8 17%);
}

.project-heading {
	text-align: center;
	padding: 2.875rem 0 3.625rem;
	.lat-long {
		color: var(--color-text-med);
	}
	h1 {
		font-size: 1.5rem;
		margin: 1.625rem 0 1.063rem;
		font-family: var(--font-body);
		text-transform: uppercase;
		letter-spacing: 0.1rem;
	}
	.work-cat {
		 li::marker {
			content: '–';
			padding-right: 1rem;
		}
		li:first-of-type::marker: ; {
			content: '';
		}
	}
	@media screen and (min-width: 60em) {
		padding: 5.5rem 0 7.313rem;
		h1 {
			margin: 1.625rem 0 3.125rem;
		}
	}
}

.hero-image {
	width: 100%;
	height: auto;
}

.project-content {
	margin: 1.5rem 0 1.625rem;
	h2 {
		margin-top: 0;
		font-family: var(--font-body);
		text-transform: uppercase;
		letter-spacing: 0.1rem;
		font-size: 1.375rem;
		text-wrap: balance;
		margin: 1.75rem 0 1.875rem;
	}
	.col-a p {
		color: var(--color-text-light);
	}
	.col-b {
		border: 1px solid var(--color-light);
		padding: 2.75rem 1.375rem;
		background: #ffff;
	}
	.highlights {
		text-transform: uppercase;
		margin: 2rem 0 0;
		padding: 0;
		list-style: none;
		letter-spacing: 0.1rem;
		li {
			border-top: 1px solid var(--color-light);
			padding: 1.25rem 0 1.563rem 1rem;
			&::before {
				content: '• ';
				color: var(--color-accent);
				margin-left: -1rem;
			}
		}
	}
	@media screen and (min-width: 60em) {
		margin: 8.5rem 0 6rem;
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
		h2 {
			margin: 1.375rem 0 4.375rem;
		}
		.col-a {
			flex: 61.55% 0 0;
		}
		.col-b {
			flex: 35.92% 0 0;
			padding: 3.125rem 1.563rem;
		}
	}
}

.project-gallery-grid {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
	margin-bottom: 1.5rem;
	img {
		width: 100%;
		height: auto;
	}
	.img-single, .img-double {
		display: flex;
		flex-direction: column;
		gap: 1.5rem;
		flex: 100% 0 0;
	}
	@media screen and (min-width: 60em) {
		margin-bottom: 5.875rem;
		.img-double {
			flex-direction: row;
			img {
				width: calc(50% - .75rem);
				height: auto;
			}
		}
	}
}

.project-pag {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	margin: 0 0 4.75rem;
	padding: 0;
	justify-content: center;
	gap: 1rem;
	.btn-all {
		order: 3;
		flex: 100% 0 0;
		text-align: center;
	}
	@media screen and (min-width: 60em) {
		margin-bottom: 8rem;
		.btn-all {
			order: 0;
			flex: auto 0 0;
		}
	}
}

/* Entry */

.entry-heading {
	padding: 2.875rem 0 1.25rem;
	max-width: 44.25rem;
	h1 {
		font-size: clamp(1.875rem, 1.5325rem + 1.7123vw, 2.8125rem);
	}
	p {
		font-size: 1.125rem;
		color: var(--color-text-light);
	}
	@media screen and (min-width: 60em) {
		padding: 5.5rem 0 3.75rem;
	}
}

.entry-content {
	padding: 1.25rem 0;
	& > p {
		margin: 0 0 1.5rem;
		line-height: 1.5;
		a {
			text-decoration: none;
			color: var(--color-text-med);
			border-bottom: 1px solid var(--color-accent);
		}
	}
	.highlight, blockquote p {
		font-family: var(--font-headings);
		font-size: clamp(1.5rem, 1.3402rem + 0.7991vw, 1.9375rem);;
	}
	blockquote cite, figcaption {
		font-family: var(--font-mono);
		color: var(--color-text-light);
		font-size: 0.75rem;
		font-style: normal;
		text-transform: uppercase;
		letter-spacing: 0.1rem;
	}
	figcaption {
		color: var(--color-text-dark);
	}
	.highlight {
		margin: 2.5rem 0 1.25rem;
	}
	blockquote {
		border-left: 2px solid var(--color-accent);
		margin: 2.5rem 0 1.875rem;
		padding-left: 1.5rem;
	}
	ul {
		margin: 1.375rem 0;
		padding: 0;
		list-style: none;
		color: var(--color-text-light);
		li {
			border-bottom: 1px solid var(--color-light);
			padding: 1.25rem 0 1.563rem 0;
			&::before {
				content: '• ';
				color: var(--color-accent);
				margin-right: 1.5rem;
			}
		}
	}
	figure {
		margin: 2.75rem 0;
		img {
			width: 100%;
			height: auto;
			margin-bottom: 1.5rem;
		}
	}
	@media screen and (min-width: 60em) {
		padding: 3.75rem 12.81%;
		.highlight {
			margin: 5.625rem 0 3.75rem;
		}
		blockquote {
			margin: 3.75rem 3rem 4rem;
		}
		ul {
			margin: 3.75rem 0;
			font-size: 1.125rem;
		}
		figure {
			margin: 5.125rem -12.81% 3rem;
			display: flex;
			justify-content: space-between;
			align-content: flex-end;
			align-items: flex-end;
			img {
				flex: 74.36% 0 0;
				width: 74.36%;
				margin: 0;
			}
			figcaption {
				flex: 23% 0 0;
			}
		}
	}
}