:root{
	--light-text-color:#fff;
	--primary-background:#30373f; /* Main background color used throughout the UI */
	--secondary-background:#1a1e23; /* Used for secondary background sections */
	--secondary-text-color:#1a1e23; /* Used for alternate text color */
	--neutral-background:#eceef0; /* Used for neutral background sections */
	--white-background:#fff; /* Used for white background sections */
	--accent-color:#f9d8ae; /* Accent color used across the UI for emphasis */
	--link-default-color:#C9C9C9;
	--button-default-color: #1a1e23;
	--dark-neutral-background:#949494;
	--dark-link-text-color: #212121;
	--card-border-color: #C1C1C1;
	--button-font-size: 12px;
	--border-width:1px;
	--letter-spacing-heading:2px;
	--letter-spacing-body-copy: 1px;
	--word-spacing: 1px;
	--light-box-shadow:  0 4px 12px rgba(0, 0, 0, 0.075);
		/*	--heading-font:'reiher-headline', serif;*/
	--heading-font: "freight-display-pro", serif;
	--body-font: 'neue-haas-grotesk-display', sans-serif;

	/* Base Spacing Unit */
	--spacing-unit: 8px;	/* Base unit (smallest size) */

	/* Scaled Units (multiples of the base unit) */
	--spacing-unit-2x: calc(var(--spacing-unit) * 2); /* 16px */
	--spacing-unit-3x: calc(var(--spacing-unit) * 3); /* 24px */
	--spacing-unit-4x: calc(var(--spacing-unit) * 4); /* 32px */
	--spacing-unit-5x: calc(var(--spacing-unit) * 5); /* 40px */
	--spacing-unit-6x: calc(var(--spacing-unit) * 6); /* 48px */
	--spacing-unit-7x: calc(var(--spacing-unit) * 7); /* 56px */
	--spacing-unit-8x: calc(var(--spacing-unit) * 8); /* 64px */
	--spacing-unit-9x: calc(var(--spacing-unit) * 9); /* 72px */
	--spacing-unit-10x: calc(var(--spacing-unit) * 10); /* 80px */
	--spacing-unit-11x: calc(var(--spacing-unit) * 11); /* 88px */
	--spacing-unit-12x: calc(var(--spacing-unit) * 12); /* 96px */

	/* Component-level tokens (upper limits) */
	--spacing-unit-13x: calc(var(--spacing-unit) * 12); /* 96px */
	--spacing-unit-14x: calc(var(--spacing-unit) * 16); /* 128px */
	--spacing-unit-15x: calc(var(--spacing-unit) * 20); /* 160px */
	--spacing-unit-16x: calc(var(--spacing-unit) * 30); /* 160px */







	/* Layout Spacing */
	--layout-padding: var(--spacing-unit-4x);	/* Padding for large sections */
	--layout-gap: var(--spacing-unit-3x);		/* Gap between sections */

	/* Component Padding */
	--component-padding-small: var(--spacing-unit); /* Small padding for elements */
	--component-padding-medium: var(--spacing-unit-2x); /* Medium padding for cards */
	--component-padding-large: var(--spacing-unit-3x); /* Large padding for more spacious elements */

	/* Typography Spacing */
	--line-height-base: calc(var(--spacing-unit) * 2); /* 16px line height */
	--line-height-heading: calc(var(--spacing-unit) * 3); /* 24px for headings */
	--margin-heading: var(--spacing-unit-3x); /* Margin around headings */
	--margin-paragraph: var(--spacing-unit-2x); /* Margin around paragraphs */
	--margin-small: var(--spacing-unit); /* Small margin for tight spaces */

	/* Grid Spacing */
	--grid-gap: var(--spacing-unit-2x); /* Gap between grid columns/rows */
	--grid-margin: var(--spacing-unit-4x); /* Outer margin for grid container */

	/* Modals and Overlays */
	--modal-padding: var(--spacing-unit-4x); /* Padding inside modals */
	--modal-margin: var(--spacing-unit-5x); /* Margin around modals */
	--overlay-opacity: 0.8; /* Overlay opacity */

		/* Base font size */
	--base-font-size: 16px; /* Body text */

	/* Scale Ratio (used for modular scaling) */
	--scale-ratio: 1.25; /* This is the recommmended ratio for font-scaling */
	--scale-ratio: 1.618;



	/* Type Scale */
	--font-size-0: 14px;
	--font-size-1: var(--base-font-size); /* 16px, body text */
	--font-size-2: calc(var(--font-size-1) * var(--scale-ratio)); /* 20px */
	--font-size-3: calc(var(--font-size-2) * var(--scale-ratio)); /* 25px */
	--font-size-4: calc(var(--font-size-3) * var(--scale-ratio)); /* 31.25px */
	--font-size-5: 80px; /* 39px */
	--font-size-6: calc(var(--font-size-5) * var(--scale-ratio)); /* 48.75px */
	--font-size-7: calc(var(--font-size-6) * var(--scale-ratio)); /* 60.94px */
	--font-size-8: calc(var(--font-size-7) * var(--scale-ratio)); /* 76.17px */

	/* Line Heights (generally 1.4-1.6 for body text, smaller for headings) */
	--line-height-body: 1.4; /* Line height for body text */
	--line-height-heading: 1.25; /* Line height for headings */

	/* Responsive Font Size Adjustments (Media Queries) */
	--font-size-mobile: calc(var(--font-size-1) * 1.2); /* 16px for mobile */
	--font-size-tablet: calc(var(--font-size-1) * 1.125); /* 18px for tablets */
	--font-size-desktop: calc(var(--font-size-1) * 1.25); /* 20px for desktops */
}
* {
	margin: 0;
	padding: 0;
}
html{
	scroll-behavior: smooth;
}
body{
	font-size: var(--font-size-1);
	line-height: var(--line-height-body);
	font-family: var(--body-font);	
}
a{
	text-decoration: none;
}
header{
	display: flex;
	background-color: var(--primary-background);
}
header nav{
	display: flex;
	padding: var(--spacing-unit-5x) 0;
}
header nav a, .page_jumps nav a{
	display: block;
	padding: 0 var(--spacing-unit-3x);
	color: var(--link-default-color);
	font-size: var(--font-size-0);
	font-weight: 500;
	letter-spacing: var(--letter-spacing-body-copy);
	text-transform: uppercase;
}
header nav a:first-child{
	padding-left: 0;
}
header nav a:hover, .page_jumps nav a:hover{
	color: var(--accent-color);
}
header nav a.is-active {
  color: var(--accent-color);
}

a.active::after {
	display: block;
	width: 16px;
	height: 4px;
	background-color: var(--accent-color);
	content: "";
}
.brand{
	color: #99A0A3;
	font-size: var(--font-size-2);
	font-family: var(--heading-font);
/*	color: #71767c;*/
}
h1,
h2,
h3,
h4,
.logo{
	line-height: var(--line-height-heading);
	font-family: var(--heading-font);
	letter-spacing: var(--letter-spacing-heading);
}
h1, h2{
	font-weight: normal;
}
h1{
	margin: 0;
	font-size: var(--font-size-5);
	line-height: 1;
}

h2{
	margin: var(--spacing-unit-2x) 0;
	color: var(--secondary-text-color);
	font-size: var(--font-size-4);
}
h3{
	font-size: var(--font-size-0);
	font-weight: 600;
}

p{
	margin-bottom:var(--spacing-unit-2x);
}
p, strong, li{
	letter-spacing: var(--letter-spacing-body-copy);
	word-spacing: var(--word-spacing);
}
p, li{
	max-width: 80ch;
}
main li {
	margin-bottom: var(--spacing-unit-2x); /* consistent spacing after each item */
	margin-left: var(--spacing-unit-5x);
}

/* Reset internal margins to avoid compounding spacing */
main li > * {
	margin-top: 0;
	margin-bottom: 0;
}

/* Optionally add a smaller gap inside if needed */
main li > * + * {
	margin-top: var(--spacing-unit); /* small gap between elements inside li */
}

/* Remove margin on the last list item */
main li:last-child {
	margin-bottom: 0;
}
ul, ol{
	margin: var(--spacing-unit) 0 var(--spacing-unit-2x);
}
ol li::marker, strong {
	font-weight: 600;
}
/*main li{
	margin-bottom: calc(var(--spacing-unit) / 2);
	margin-left: var(--spacing-unit-5x);
}*/
img[src=""], img:not([src]) {
	display: block;
	width: 100%;
	height: 100%;
	background-color: var(--neutral-background);
	object-fit: cover;
}

footer{
	padding: var(--spacing-unit-5x) var(--spacing-unit-10x);
	border-top: var(--border-width) solid #d5d9dd;
	color: var(--secondary-text-color);
	font-size: var(--font-size-0);
	/* width: 100%; */
	font-family: var(--body-font);
	
}
/* Screen Reader Styling */
.sr-only {
	position: absolute;
	overflow: hidden;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	clip: rect(0, 0, 0, 0);
}

.btn {
	/* Old browsers */
	transition:all .4s ease;	 
}
.btn:hover {
	color: var(--secondary-text-color);
	background-position: left bottom;
}
a.btn{
	display:inline-block;
	margin-top: var(--spacing-unit-2x);
	padding: var(--spacing-unit-2x) var(--spacing-unit-4x);
	background: linear-gradient(to left, var(--secondary-background) 50%, var(--accent-color) 50%);
	background-color: var(--secondary-background);
	color: var(--light-text-color);
	font-size: var(--button-font-size);
	font-weight: 400;
	text-transform: uppercase;
	background-size: 200% 100%;
	background-position: right bottom;
	letter-spacing: 1.5px;
}
a.card_link{
	display: block;
	padding: var(--spacing-unit-7x);
}
.related_case_studies{
	position: relative;
}

.projects_cont .item .read_more, .case-studies-container .card_link .read_more, .related_case_studies a .read_more{
	position: absolute;
	bottom: var(--spacing-unit-6x);
	z-index: 0;
	display: flex;
	width: 128px;
	height: 14px;
	transition: opacity .4s;
	opacity: 0;
	align-items: center;

}
.projects_cont .item .arrow, .case-studies-container .item .arrow, .related_case_studies a .arrow{
	position: absolute;
	bottom: var(--spacing-unit-8x);
	z-index: 1;
	display: flex;
	width: 35px;
	height: 14px;
	padding-top: var(--spacing-unit-2x);
	transition: .4s;
	align-items: center;

}

.related_case_studies a .arrow{
	bottom: var(--spacing-unit-6);
}
.related_case_studies a .read_more{
	bottom: var(--spacing-unit-4);
}
.arrow svg#forward_arrow {
	width: 50%;
	color: var(--secondary-background);
	transform: rotate(180deg);
}

svg#forward_arrow {
	width: 20%;
	color: var(--secondary-background);
	transform: rotate(180deg);
}

.projects_cont .item:hover .arrow, .case-studies-container .item:hover .arrow, .related_case_studies > a:hover .arrow{
	background-color: transparent;
	transform: translateX(132px);
}
.projects_cont .item:hover .read_more, .case-studies-container .card_link:hover .read_more, .related_case_studies > a:hover .read_more{
	opacity: 1;
}

.related_case_studies > a:hover .arrow{
	transform: translateX(132px);
}

.about_me a{
	color: #000;
}
/*.about_me a:hover{
	text-decoration: underline;
	transition: opacity .4s;
}*/

.link-arrow-fade {
  text-decoration: none;
  color: inherit;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-weight: 500;
}

.text {
  position: relative;
}

.text::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -0.12em;
  width: 100%;
  height: 1px;
  background: currentColor;
  opacity: 0;
  transition: opacity 300ms ease;
}

.arrow {
  display: inline-block;
  transition: transform 200ms ease;
}

.link-arrow-fade:hover .arrow,
.link-arrow-fade:focus-visible .arrow {
  transform: translateX(0.18em);
}

.link-arrow-fade:hover .text::after,
.link-arrow-fade:focus-visible .text::after {
  opacity: 1;
}

.projects_cont .item:hover{
	background-color: var(--white-background);
	cursor: pointer;
	/*opacity: 1;*/
}
/*.projects_cont .item:hover{
	border-right: var(--border-width) solid #ffffff;
}*/
.fadein {
	transition: .4s;
	transform: translateY(150px) translateZ(0);
	-webkit-transition-delay: .3s;
	-o-transition-delay: .3s;
	transition-delay: .3s;
	opacity: 0;
}
.fadein_text {
	transition: .4s;
	transform: translateY(40px) translateZ(0);
	-webkit-transition-delay: .6s;
	-o-transition-delay: .6s;
	transition-delay: .6s;
	opacity: 0;
}
.fadein-subtext {
	transition: .6s;
	transform: translateY(20px) translateZ(0);
	opacity: 0;
}
.inView {
	transform: translateY(0px) translateZ(0);
	opacity: 1;
}
/* 12 Column Grid container (overlay) */
.grid-container {
	position: fixed; 
	top: 0;
	left: 0;
	z-index: 9999;
	display: grid;
	box-sizing: border-box;
	width: 100%;
	height: 100%;
	padding: 0px var(--spacing-unit-5x);
	grid-template-columns: repeat(12, 1fr);
	gap: var(--spacing-unit-4x); 
	pointer-events: none; 
}

/* Style for grid items */
.grid-item {
	box-sizing: border-box;
	height: 100%; 
	padding: 0px var(--spacing-unit-3x);
	border-right: var(--border-width) solid rgba(52, 152, 219, 1);
	border-left: var(--border-width) solid rgba(52, 152, 219, 1);
	background-color: rgba(52, 152, 219, .1);
	color: var(--light-text-color);
	text-align: center;

}
.pb-0 .content_wrapper {
	padding-bottom: 0 !important;
}
.content_wrapper p:last-of-type{
	margin-bottom: 0;
}

.content_wrapper{
	margin: 0 auto;
	padding-block: var(--spacing-unit-8x);
}
.text_block.closing, #about_cta{
	background-color: var(--secondary-background);
}
.text_block.closing .content_wrapper, #about_cta .content_wrapper{
		padding-block: var(--spacing-unit-16x);
}

@media only screen and (max-width:500px ){
	:root{
		--spacing-unit: 4px;
	}
	a.btn{
		display: block;
		width: max-content;
	}
	h1, h2{
		font-size: var(--font-size-3);
	}
	footer{
		padding: var(--spacing-unit-5x) var(--spacing-unit-2x);
	}
	.grid-container {
		padding: 0 var(--spacing-unit-3x);
		grid-template-columns: repeat(6, 1fr);
		gap: var(--spacing-unit-2x); 
	}
}