:root {
    --main-bg-color: #ffffff;
    
    --midnightBlue: #000F47;
    --skyBlue: #CEECFF;
    --neutral: #F7F3EE;
    
    --yellow: #FFBF00;
    --darkYellow: #CB7E03;
    
    --linkBlue: #2c6ef2;
    
    --header-height: 100px;
    --header-height-scrolled: 80px;
    --header-height-tablet: 90px;
    --header-height-mobile: 60px;
    --off-white: #e3edec;
    --white: #ffffff;
    
    
   
    --margin-desktop: 64px;
    --margin-tablet: 40px;
    --margin-mobile: 20px;

	--grayscale-percentage: 100%;
	--contrast-amount: 1.25;

    --animation-time: 2s; 

	--gap: 40px;
	--large-gap: 40px;
	--radius: 12px;
	--max-width: 1400px;

}

@font-face {
    font-family: "MarshSerif-Regular";
	src: url("../fonts/MarshSerif-Regular.woff2") format("woff");
	font-weight: normal;
	font-style: normal;
}

@font-face {
    font-family: "MarshSerif-Italic";
	src: url("../fonts/MarshSerif-Italic.woff2") format("woff");
	font-weight: normal;
	font-style: normal;
}

@font-face {
    font-family: "NotoSans-Regular";
	src: url("../fonts/NotoSans-Regular.ttf") format("truetype");
	font-weight: normal;
	font-style: normal;
}
@font-face {
    font-family: "NotoSans-Italic";
	src: url("../fonts/NotoSans-Italic.ttf") format("truetype");
	font-weight: normal;
	font-style: normal;
}
@font-face {
    font-family: "NotoSans-Bold";
	src: url("../fonts/NotoSans-Bold.ttf") format("truetype");
	font-weight: normal;
	font-style: normal;
}
@font-face {
    font-family: "NotoSans-SemiBold";
	src: url("../fonts/NotoSans-SemiBold.ttf") format("truetype");
	font-weight: normal;
	font-style: normal;
}
@font-face {
    font-family: "NotoSans-Bold";
	src: url("../fonts/NotoSans-Bold.ttf") format("truetype");
	font-weight: normal;
	font-style: normal;
}

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

img { display: block; }

.prevent-select {
  -webkit-user-select: none; /* Safari */
  -ms-user-select: none; /* IE 10 and IE 11 */
  user-select: none; /* Standard syntax */
}

::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
    background: #888888;
}

::-webkit-scrollbar-thumb:hover {
    background: #444444;
}

.mouse-scroll {
    display: block;
    margin: 0 auto 0.125rem;
    width: 27px;
    transition: all 0.5s ease-in-out;
}
	.mouse-scroll.invisible {
		display: none;
		transition: all 0.5s ease-in-out;
	}
	
.mouse-scroll > .mouse {
    height: 42px;
    width: 24px;
    border-radius: 14px;
    -webkit-transform: none;
    -moz-transform: none;
    -ms-transform: none;
    transform: none;
    border: 2px solid #ffffff;
    top: 170px;
    -webkit-animation: mouse-scroll 1.2s linear infinite;
    -moz-animation: mouse-scroll 1.2s linear infinite;
}
.mouse-scroll > .mouse > .wheel {
    display: block;
    margin: 5px auto;
    background-color: #ffffff;
    position: relative;
    height: 4px;
    width: 4px;
    border: 2px solid #ffffff;
    border-radius: 8px;
    -webkit-animation: mouse-wheel 1.2s linear infinite;
    -moz-animation: mouse-wheel 1.2s linear infinite;
}
.mouse-text {
    display: block;
    margin: 1vh auto 0 auto;
    text-align: center;
    color: #ffffff;
    font-family: "NotoSans-Regular";
    text-transform: uppercase;
    font-size: 0.8em;
    letter-spacing: 0.02em;
    -webkit-animation: mouse-fade 1.2s linear infinite;
    -moz-animation: mouse-fade 1.2s linear infinite;
}

.scroll-down {
    position: absolute;
    bottom: 30px;
    right: 0;
    text-align: center;
    height: 100px;
    z-index: 100;
    text-decoration: none;
    width: 50px;

	background-size: 0% 1px;
	text-decoration: none;
	
	display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    justify-self: center;
    align-self: center;
    width: 100%;
}
.scroll-down:hover {
	background-size: 0% 1px;
	text-decoration: none;
}

@-webkit-keyframes mouse-scroll {
	0% {
		opacity: 1;
		-webkit-transform: translateY(0);
		-ms-transform: translateY(0);
		transform: translateY(0);
	}
	25% {
		opacity: 0.5;
		-webkit-transform: translateY(0.5em);
		-ms-transform: translateY(0.5em);
		transform: translateY(0.5em);
	}
	50% {
		opacity: 0;
		-webkit-transform: translateY(1em);
		-ms-transform: translateY(1em);
		transform: translateY(1em);
	}
	75% {
		opacity: 0;
		-webkit-transform: translateY(0);
		-ms-transform: translateY(0);
		transform: translateY(0);
	}
	100% {
		opacity: 1;
		-webkit-transform: translateY(0);
		-ms-transform: translateY(0);
		transform: translateY(0);
	}
}
@-moz-keyframes mouse-scroll {
	0% {
		top: 1px;
	}
	25% {
		top: 2px;
	}
	50% {
		top: 3px;
	}
	75% {
		top: 2px;
	}
	100% {
		top: 1px;
	}
}

@-webkit-keyframes mouse-fade {
	0% {
		opacity: 1;
		-webkit-transform: translateY(0);
		-ms-transform: translateY(0);
		transform: translateY(0);
	}
	33% {
		opacity: 0.5;
		-webkit-transform: translateY(0.5em);
		-ms-transform: translateY(0.5em);
		transform: translateY(0.5em);
	}
	50% {
		opacity: 0;
		-webkit-transform: translateY(1em);
		-ms-transform: translateY(1em);
		transform: translateY(1em);
	}
	100% {
		opacity: 0;
		-webkit-transform: translateY(1em);
		-ms-transform: translateY(1em);
		transform: translateY(1em);
	}
	75% {
		opacity: 0;
		-webkit-transform: translateY(0);
		-ms-transform: translateY(0);
		transform: translateY(0);
	}
	100% {
		opacity: 1;
		-webkit-transform: translateY(0);
		-ms-transform: translateY(0);
		transform: translateY(0);
	}
}

body, html {
	height: 100%;
	overflow-x: hidden;
}

body {
	margin: 0;
	padding: 0;
	/*padding-top: 100px;*/
	font-family: "NotoSans-Regular";
	font-size: clamp(1rem, 0.9029rem + 0.3107vw, 1.4rem);
    line-height: 1.5;
	background: var(--white);
	color: var(--midnightBlue);

	width: 100%;
	height: 100%;
	
	overflow-x: hidden;
	overflow-y: auto;
}

html:has(body.hide) { overflow-y: hidden; }

h1, h2 {
	margin: 0 0 3rem 0;
	padding: 0;
	font-family: "MarshSerif-Regular";
	/*font-size: clamp(2.5rem, 1.8182rem + 2.1818vw, 4rem);*/
	font-size: clamp(2rem, 1.0291rem + 3.1068vw, 6rem);
	font-weight: normal;
	font-style: normal;
	line-height: 1;
    max-width: 70rem;
}
	h1:has(+ h2.sub),
	h2:has(+ p) {
		margin-bottom: 1rem;
	}

h3, .overlay h3 {
	margin: 0 0 2rem 0;
	padding: 0;
	font-family: "MarshSerif-Regular";
	font-size: clamp(1.8rem, 1.2175rem + 1.8641vw, 4.2rem);
	font-weight: normal;
	font-style: normal;
	line-height: 1.2;
    max-width: 70rem;
    
    color: var(--midnightBlue);
}

h4, .overlay a {
	margin: 0 0 1rem 0;
	padding: 0;
	font-family: "MarshSerif-Regular";
	font-size: clamp(1.2rem, 0.9087rem + 0.932vw, 2.4rem);
	font-weight: normal;
	font-style: normal;
	line-height: 1.3;
    max-width: 70rem;
}
/*
	h4 {
		margin-bottom: 0.5rem;
		font-family: "NotoSans-Regular";
	}
*/
h5 {
	margin: 2rem 0;
	padding: 0;
	font-family: "NotoSans-Bold";
	font-size: clamp(1rem, 0.8058rem + 0.6214vw, 1.8rem);
	font-weight: normal;
	font-style: normal;
	letter-spacing: 0.005em;
	line-height: 1.3;
    max-width: 70rem;
}

p, li {
	margin: 0;
	padding: 0 0 1.5rem 0;
	font-family: "NotoSans-Regular";
	/*font-size: clamp(1rem, 1.4vw, 1.15rem);*/
	font-size: clamp(1rem, 0.9029rem + 0.3107vw, 1.4rem);
	font-weight: normal;
	font-style: normal;
    line-height: 1.5;
    max-width: 70rem;
}
	#modalContent p {
		font-size: clamp(1rem, 0.9272rem + 0.233vw, 1.3rem);
	}
	
	
p:last-of-type {
	padding-bottom: 3rem;
}
	footer p, footer a, footer p:last-of-type {
		padding: 0;
		font-size: clamp(0.8rem, 0.7091rem + 0.2909vw, 1rem);
	}
	
	#footnote p {
		padding: 0 0 0.25rem 2rem;
		font-family: 'NotoSans-Italic';
		font-weight: normal;
		font-style: normal;
		position: relative;
	}
		#footnote p sup {
			position: absolute;
			text-align: center;
			left: 0.5rem;
			width: 1rem;
		}
	
ul, ol {
	margin: 0 0 0 1.5rem;
}
li {
	padding: 0 0 0.5rem 0;
}

ul + p,
ol + p {
	padding-top: 2rem;
}

p + h3,
ul + h3,
ol + h3 {
	padding-top: 3rem;
}

strong {
	font-family: "NotoSans-Bold";
	font-weight: normal;
	font-style: normal;
}

a button, a button.yellow,
button, button.yellow {
	margin: 0;
	padding: 20px 25px;
	background: var(--yellow);
	color: var(--midnightBlue);
	font-family: "NotoSans-Regular";
	font-size: clamp(1.1rem, 0.8816rem + 0.699vw, 2rem);
	font-weight: normal;
	font-style: normal;
	
	border: none;
	cursor: pointer;
	
}

a button.yellow:hover, a button.yellow:active,
button.yellow:hover, button.yellow:active {
	background: var(--midnightBlue);
	color: var(--skyBlue);
	
}


section {
  display: flex;  
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100vw;
  /*min-height: 100vh;*/
  
  position: relative;
}
/*
section::before,
section::after {
  content: "";
  flex: 1;
}
*/
header.skyBlue,
section.skyBlue,
div.skyBlue {
	background: var(--skyBlue);
	color: var(--midnightBlue);
}
section.midnightBlue,
div.midnightBlue {
	background: var(--midnightBlue);
	color: var(--white) !important;
}
section.neutral,
div.neutral {
	background: var(--neutral);
	color: var(--midnightBlue);
}
section.white,
div.white {
	background: var(--main-bg-color);
	color: var(--midnightBlue);
}

.fullWidthContainer {
	margin-top: 3rem;
}

section .container {
	margin: 0 auto;
	padding: 3rem 6rem;
	width: 100%;
	max-width: 150rem;
	/*min-height: 50vh;*/
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: flex-start;
	z-index: 2;
}
	/*** remove padding to make quote panel full width ***/
	section .container:has(.quote) {
		padding: 0;
	}
	
section .container.onlyImages {
	padding: 1rem 6rem 0;
}

@media (max-width: 800px) {

	section .container {
		padding: 3rem 3rem;
	}
	section .container.onlyImages {
		padding: 1rem 3rem 0 3rem;
	}

}

/*** override inline video spacing on container ***/
.video + .container {
	padding-bottom: 1rem;
}

/* b-roll */

.section-video {
	margin: 0;
	padding: 0;
	width: 100vw;
	height: 100vh;
	overflow: hidden;
	position: relative;
	
	display: flex;
	justify-content: center;
	align-items: center;
	/*
	background-color: transparent !important;
	background-image: url("../images/home/b-roll-preview.jpg") !important;
	background-size: cover !important;
	*/
}

@media (max-width: 800px) {

	.section-video {
		height: fit-content;
		min-height: 700px;
	}

}

.section-video iframe {
	box-sizing: border-box;
	height: 56.25vw;
	left: 50%;
	min-height: 100%;
	min-width: 100%;
	transform: translate(-50%, -50%);
	position: absolute;
	top: 50%;
	width: 177.77777778vh;
}

.section-video .container {
	margin: 0 auto;
	padding: 2rem 6rem;
	width: 100%;
	max-width: 150rem;
	height: 100vh;
	height: 100svh;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
	z-index: 2;
}

@media (max-width: 800px) {

	.section-video .container {
		padding: 2rem 3rem;
	}

}

.lockup {
	margin: 0;
	padding: 0;
	width: 60%;
	/*max-width: 800px;*/
	
	z-index:2;
}

/* end b-roll */






/*** header ***/

header {
	margin: 0 auto;
	padding: 0;
	position: relative;
	top: 0;
	left: 0;
	width: 100vw;
	/*max-width: 1600px;*/
	height: 80px;
	display: flex;
	/*justify-content: space-between;*/
	justify-content: flex-start;
	align-items: center;
	z-index: 5;
	transition: opacity 0.4s ease, transform 0.4s ease;
	pointer-events: auto;
}
	header .container {
		margin: 0 auto;
		padding: 1rem 6rem;
		width: 100%;
		max-width: 150rem;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: flex-start;
	}
	
		header .container img {
			height: clamp(35px, calc(31.364px + 1.136vw), 45px);
		}

@media (max-width: 800px) {

	header .container {
		padding: 1rem 3rem;
	}

}

/*
html:has(body.hide) header {
	padding-right: 40px;
}
*/

header.fade-out {
	opacity: 0;
	transform: translateY(-10px);
}

.logo {
	margin: 0;
	padding: 0;
	display: flex;
	justify-content: flex-start;
	align-items: flex-start;
}

.hamburger {
	width: 76px;
	height: 66px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	cursor: pointer;
	background: var(--skyBlue);
	border: 0;
	-webkit-tap-highlight-color: transparent;
	z-index: 50;
	
	position: fixed;
	top: 0;
	right: 0;
	
	padding: 20px;
}
	.hamburger.open {
		margin-right:10px;
	}
		#modalContent .hamburger.open {
			margin-right: 0;
		}
		/* used to stop the screen moving when opening a modal, behave the same as the nav overlay */
	.hamburger.fakeOpen { 
		margin-right:10px;
	}

.hamburger span {
	height: 3px;
	background: var(--midnightBlue);
	border-radius: 3px;
	display: block;
	transition: transform 0.35s ease, opacity 0.35s ease;
}
.hamburger.oneHundredPlus span,
.hamburger.dark span {
	background: var(--midnightBlue);

}
.hamburger.open span,
.hamburger.oneHundredPlus.open span,
.hamburger.dark.open span {
	background: var(--midnightBlue);

}

/* Hamburger to X */
.hamburger.open span:nth-child(1) {
	transform: rotate(45deg) translateY(8px) translateX(8px);
}
.hamburger.open span:nth-child(2) {
	opacity: 0;
	transform: translateX(-10px);
}
.hamburger.open span:nth-child(3) {
	transform: rotate(-45deg) translateY(-8px) translateX(8px);
}


.hamburger.oneHundredPlus {
	background: var(--skyBlue);
}
.hamburger.open {
	background: transparent;
}

/* Ensure controls contrast over the video */
/*
header,
.hamburger span { 
	color: #fff 
}
*/

/* Overlay Nav */
.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--skyBlue);
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  z-index: 10;
}

.overlay.active {
  opacity: 1;
  visibility: visible;
  overflow-y: hidden;
  padding-right: 10px;
}

.overlay div {
	margin: 0;
	padding: 0;
	display: flex;
	flex-flow: column;
	justify-content: center;
	align-items: center;
}

.overlay a {
  margin: 0;
  padding: 0.5rem 0 0 0;
  color: var(--midnightBlue);
  text-decoration: none;
  font-size: clamp(2rem, 1.2718rem + 2.3301vw, 5rem);
  line-height: 1.3;
}


/* ANIMATE UNDERLINE ON HYPERLINK - DARK BACKGROUND */
.overlay a {
    position: relative;
    text-decoration: none;
    background-image: linear-gradient(var(--midnightBlue), var(--midnightBlue));
    background-position: 50% 100%;
    background-repeat: no-repeat;
    background-size: 0% 1px;
    color: var(--midnightBlue);
    transition: background-size .5s;
    padding-bottom: 0.15em;    
}
 
.overlay a:not(.impact):hover {
    background-size: 100% 1px;
    text-decoration: none;
}

.overlay a.impact {
	padding-bottom: 4rem;
}
.overlay a.impact img {
	height: clamp(35px, calc(14.369px + 4.126vw), 120px);
}

.noShift {
	overflow-y: hidden;
    padding-right: 10px;
}


/*** about us icon grid ***/
/*
#about-us .grid {
	display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    grid-template-areas:
        "about-one about-two about-three about-four about-five";
    grid-gap: 12px;
    gap: 12px;
}
*/
/*** work grid on homepage ***/
#pin {
	height: 100vh;
	overflow: hidden;
	
	display: flex;
	flex-direction: row;
}

#workFixedContent {
	width: 100%;
	height: 100%;
	position: relative;
	top: 0;
	right: auto;
	bottom: auto;
	left: 0;
	display: inline-flex;
	justify-content: center;
	align-items: flex-start;
	z-index: 15;
}
	#workFixedContent .container {
		justify-content: center;
		width: 100vw; /* half width so need to override width of elements inside... */
		height: 100%;
	}
		#workFixedContent .container h2,
		#workFixedContent .container p {
			width: 50%;
			max-width: 60rem;
			padding-right: clamp(16px, calc(4.364px + 3.636vw), 48px);
		}
	
/*** pinned content ***/
#workPinContent {
	position: absolute;
	right: 0;
	top: 0;
	width: 50%;
	height: 50%;
	will-change: transform;
	z-index: 16;
}

.pin-box {
	height: 100%;
	width: 100%;
	position: relative;
	/*border-bottom: 10px solid transparent;*/
	overflow: hidden;
}
	.pin-box.last {
		border-bottom: none;
	}

.pin-box .thumbnailOverlay {
	margin: 0;
	padding: 0;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	display: flex;
	justify-content: center;
	align-items: flex-end;
	text-align: center;
	z-index: 21;
}
.pin-box .thumbnailOverlay h3 {
	margin: 0 0 2rem 0;
	padding: 1.25rem;
	position: absolute;
	width: 50%;
	z-index: 32;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: rgba(255, 255, 255, 0.9);
	color: var(--midnightBlue);
	font-family: "MarshSerif-Regular";
    font-size: clamp(1.6rem, 1.4544rem + 0.466vw, 2.2rem);
}
	/*
	.pin-box:hover .thumbnailOverlay {
		background-color: rgba(0, 15, 71, 0.5);
	}
	*/
	.pin-box:hover .thumbnailOverlay h3 {
		background-color: var(--midnightBlue);
		color: var(--skyBlue);
	}

.pin-box .thumbnailOverlay h5 {
	margin: 0;
	padding: 1.5rem;
	position: absolute;
	z-index: 32;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	background-color: rgba(255, 255, 255, 0.9);
	color: var(--midnightBlue);
	font-family: "NotoSans-Bold";
	line-height: 1;
	text-align: center;
}
	.pin-box:hover .thumbnailOverlay h5 {
		/*background-color: var(--neutral);
		color: var(--midnightBlue);*/
	}

.pin-image {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	 object-fit: cover;
	z-index: 20;
}


.pin-box .pin-image {
	transform: scale(1.02);
	transition: transform 0.5s ease;
}
.pin-box:hover .pin-image {
	transform: scale(1.10);
	transition: transform 0.5s ease;
}


.pin-image.half-width-left {
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
     
  border-bottom: 10px solid transparent;
  border-right: 10px solid transparent;
}
.pin-image.half-width-right {
  position: absolute;
  top: 0;
  left: 50%;
  width: 50%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
     
  border-bottom: 10px solid transparent;
}


@media (max-width: 800px) {

	#pin {
		display: flex;
		flex-direction: column;
		height: fit-content;
	}
	#workFixedContent {
		width: 100%;
		height: 50%;
	}
	#workFixedContent .container {
		justify-content: flex-start;	
	}
	#workFixedContent .container h2,
	#workFixedContent .container p {
		width: 100%;
	}
	#workPinContent {
		position: relative;
		width: 100%;
		height: auto;
		will-change: unset;
	}
	.pin-box {
		min-height: 30vh;
		position: relative;
		border-bottom: none;
	}

}

/*** end work homepage grid ***/

/*** the team homepage grid ***/
.about-us-grid,
.our-people-grid,
.get-in-touch-grid {
	margin: 3rem 0;
	display: grid;
	/*grid-template-columns: repeat(5, 1fr);*/
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: var(--gap);
	/*grid-auto-flow: dense;*/
	
	width: 100%;
}
.our-people-grid {
	gap: 0;
}
.get-in-touch-grid {
	margin: 1rem 0;
}

	.about-us-grid .grid-item,
	.our-people-grid .grid-item,
	.get-in-touch-grid .grid-item {
		gap: 0 40px;
		
		display: flex;
		flex-flow: column;
		justify-content: center;
		align-items: center;
	}
	.our-people-grid .grid-item,
	.get-in-touch-grid .grid-item {
		align-items: flex-start;
	}
	
	.our-people-grid .grid-item .portrait,
	.get-in-touch-grid .grid-item .portrait {
		aspect-ratio: 1 / 1;
		overflow: hidden;
		transform: scale(1);
		transition: transform 0.5s ease;
	}
	
	.about-us-grid img,
	.our-people-grid img,
	.get-in-touch-grid img { 
		margin: 0 auto; 
		margin-bottom: 1.5rem; 
		/*aspect-ratio: 1 / 1;*/
		font-size: 0; 
		display: block; 
		width: 100%;
		object-fit: cover;
		transform: scale(1);
		transition: transform 1s ease;
	}
		.get-in-touch-grid img {
			max-width: clamp(120px, calc(105.455px + 4.545vw), 160px);
		}
		
		.our-people-grid a {
			transform: scale(1);
			transition: transform 0.5s ease;
		}
		
	.about-us-grid a:hover img,
	.our-people-grid a:hover,
	.get-in-touch-grid a:hover .portrait img { transform: scale(clamp(1, 1.05, 1.1)); transition: transform 0.5s ease; z-index: 666 !important; }
	
	.about-us-grid a,
	.our-people-grid a,
	.get-in-touch-grid a { text-decoration: none; }
	
	.about-us-grid h5,
	.about-us-grid p,
	.our-people-grid h5,
	.our-people-grid p,
	.get-in-touch-grid h5,
	.get-in-touch-grid p { margin-bottom: 0rem; padding-right: 40px; line-height: 1.4; text-align: left; text-decoration: none; color: var(--midnightBlue); }

	.about-us-grid h5,
	.about-us-grid p { line-height: 1.4; text-align: center; padding-right: 0; }

	.about-us-grid h5,
	.our-people-grid h5,
	.get-in-touch-grid h5 { 
		margin-top: 1.25rem;
		margin-bottom: 0.5rem; 
		padding-right: 1.5rem;
		font-family: "MarshSerif-Regular";
		font-size: clamp(1.6rem, 1.4544rem + 0.466vw, 2.2rem);
		line-height: 1.2; 
	}
		.about-us-grid h5 {
			margin-top: 0;
		}
		
	.our-people-grid p {
		padding-left: 0rem;
		padding-right: 2.5rem;
		padding-bottom: 2rem;
	}

	.our-people-grid a .details {
		width: 100%;
		transform: scale(1);
		transition: transform 1s ease;
	}
	
	.our-people-grid a:hover h5,
	.our-people-grid a:hover p {
		padding-left: 1rem;
		padding-right: 1.5rem;
		color: var(--skyBlue);
		transform: scale(1);
		transition: transform 1s ease;
	}
	.our-people-grid a:hover .details {
		background: var(--midnightBlue);
		transform: scale(1);
		transition: transform 1s ease;
	}
	
	.our-people-grid .buttonContainer a {
	
	}
	
/*
@media (max-width: 1200px) {

.about-us-grid,
.our-people-grid {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

}
*/
@media (max-width: 1000px) {

.about-us-grid,
.our-people-grid {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

}

@media (max-width: 800px) {

.about-us-grid,
.our-people-grid {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

}

@media (max-width: 600px) {
	.about-us-grid,
	.our-people-grid,
	.get-in-touch-grid {
		grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	}
}

/*** end team grid ***/

/*** thinking homepage ***/

#thinking {
	width: 100vw;
	height: 100vh;
	overflow: hidden;
	
	display: flex;
	flex-direction: row;
}
#thinkingFixedContent {
	width: 100%;
	height: 100%;
	position: relative;
	top: 0;
	right: auto;
	bottom: auto;
	left: 0;
	display: inline-flex;
	justify-content: center;
	align-items: flex-start;
}
	#thinkingFixedContent .container {
		justify-content: center;
		width: 100vw; /* half width so need to override width of elements inside... */
		height: 100%;
	}

#thinking .container h2,
#thinking .container p {
	width: 50%;
	max-width: 60rem;
	padding-right: clamp(16px, calc(4.364px + 3.636vw), 48px);
}

#thinkingPinContent {
	position: absolute;
	right: 0;
	top: 0;
	width: 50vw;
	height: 100vh;
	will-change: transform;
}
	#thinkingPinContent img {
		object-fit: cover;
		width: 100%;
		height: 100%;
	}

.image-reveal-container {
  position: relative;
  top: 0;
  left: 0;
  width: 100%; /* Adjust as needed */
  height: 100%; /* Adjust as needed */
  overflow: hidden; /* This is key to hide the overlay during the animation */
  z-index: 1;
  
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  align-items: center;
}

/* The image itself */
.image-reveal-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}

/* The overlay elements */
.reveal {
  position: absolute;
  left: 0;
  width: 100%;
  height: 50%; /* Each overlay covers half the height */
  background-color: var(--skyBlue);
  z-index: 4;  
}

.top-reveal {
  top: 0;
}

.bottom-reveal {
  bottom: 0;
}


@media (max-width: 800px) {

	#thinking {
		display: flex;
		flex-direction: column;
		height: fit-content;
	}
	#thinkingFixedContent {
		width: 100%;
		height: 50vh;
	}
	#thinking .container h2,
	#thinking .container p {
		width: 100%;
	}
	#thinkingPinContent {
		position: relative;
		width: 100%;
		height: 50vh;
		will-change: unset;
	}
	.image-reveal-container {
		justify-content: flex-end;
	}
	.reveal {
		display: none;
	}

}
/*** end thinking homepage ***/






footer {
  display: flex;  
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100vw;
}
	footer .container {
		margin: 0 auto;
		padding: 2rem 6rem;
		width: 100%;
		max-width: 150rem;
		/*min-height: 50vh;*/
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		z-index: 2;
	}

		footer .container div.rule,
		footer .container div.noRule {
			margin: 0;
			padding: 2rem 0 0 0;
			width: 100%;
			border-top: 1px solid var(--midnightBlue);
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: flex-end;
		}
			footer .container div.noRule {
				padding: 0;
				border-top: none;
			}
			
			footer #marsh img {
				margin-bottom: 1rem;
				padding: 0.5rem 0;
				height: clamp(35px, calc(10px + 62.5vw), 60px);
			}
			footer a {
				margin: 0 0.5rem 0 0;
				padding: 0;
				color: var(--midnightBlue);
				text-decoration: none;
				background-image: linear-gradient(var(--midnightBlue), var(--midnightBlue));
				background-position: 50% 100%;
				background-repeat: no-repeat;
				background-size: 0% 1px;
				transition: background-size .5s;
				padding-bottom: 0.15em;
			}
			footer a:last-of-type {
				margin-right: 0;
			}
			footer a:hover {
				background-size: 100% 1px;
    			transition: background-size .5s;
    			padding-bottom: 0.15em;
			}

	@media (max-width: 800px) {
	
		footer .container {
			padding: 3rem 3rem 2.5rem;
		}
		footer .container div.rule,
		footer .container div.noRule {
			flex-direction: column;
			align-items: flex-start;
		}
		footer #marsh {
			padding-bottom: 1rem;
		}
	
	}



/*** modals for skills and team bios ***/
.hiddenContent {
    display: none;
}

#myModal {
	position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--skyBlue);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    opacity: 0;
    visibility: hidden;
    transition: opacity 
}

#myModal.active {
	opacity: 1;
    visibility: visible;
    overflow-y: hidden;
    /*padding-right: 10px;*/
}


#modalContent {
    margin: 0;
    padding: 40px;
    width: 100%;
    /* max-width: 1200px; */
    height: 100%;
    /* max-height: 80%; */
    /* overflow: hidden; */
    /* background: var(--main-bg-color); */
    color: var(--midnightBlue);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    overflow: auto;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: flex-start;
}
.close-button {
    position: absolute;
    top: 0;
    right: 0;
    cursor: pointer;
    color: var(--yellow);
    font-size: 48px;
}
div.bioContainer {
    margin: 0 10%;
    padding: 0;
    display: flex;
    flex-flow: row;
    justify-content: center;
    align-items: flex-start;
    width: 80%;
    gap: 4rem;
}
div.bioIcon {
    margin: 2rem 0 0;
    padding: 0;
    display: flex;
    flex-flow: column;
    justify-content: flex-start;
    align-items: flex-start;
    width: fit-content;
}
img.modal-image {
    width: clamp(150px, calc(113.636px + 11.364vw), 250px);
    height: auto;
}
div.bioIcon,
div.bioDetails {
	margin-top: 2rem;
}

@media (max-width: 800px) {
	
	div.bioContainer {
		flex-flow: column;
	}

}

ul.leftBar, ol.leftBar {
	margin: 1rem 0 0 1.5rem;
    padding-left: 2rem;
    border-left: 3px solid var(--yellow);
    list-style-type: none;
}
	ul.leftBar.spaceBelow, ol.leftBar.spacebelow {
		margin-bottom: 2rem;
	}

ul.leftBar li {
    font-family: "NotoSans-Italic";
}
	
/*** quote ***/
.quote {
	margin: 0;
	/*padding: 0 4rem;*/
	padding: 0 6rem;
	width: 100%;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: center;
}
.openingQuote, .closingQuote { display: flex; }
	.openingQuote { justify-content: flex-start; }
	.closingQuote { justify-content: flex-end; }

.openQuote,
.closeQuote {
	width: auto;
	height: clamp(80px, calc(22.857px + 11.429vw), 160px);
	display: flex;
	font-size: 0;
}
.quoteText {
	margin: 0;
	padding: 2rem 5rem 1rem 5rem;
	font-family: "MarshSerif-Regular";
	font-size: clamp(1.2rem, 0.9273rem + 0.8727vw, 1.8rem);
	line-height: 1.3;
}
.quotePerson {
	align-self: flex-start;
	margin-top: 1rem;
	padding: 0 5rem;
}

@media (max-width: 800px) {

	.quote {
		padding: 0 3rem;
	}

}

.stat-container {
	margin: 0;
	padding: 0;
	/*
	display: flex;
	justify-content: flex-start;
	align-items: flex-start;
	gap: clamp(32px, calc(20.364px + 3.636vw), 64px); 
	*/

	display: grid;
    /* grid-template-columns: repeat(5, 1fr); */
    /*grid-template-columns: repeat(3, minmax(0, 1fr));*/
    grid-template-columns: repeat( auto-fit, minmax(220px, 1fr) );
    gap: 20px;
    /* grid-auto-flow: dense; */
    width: 100%;
    max-width: 1200px;
    	
}
	.stat-container div {
	margin: 0;
	padding: 0;
	}

.stat {
	/*
	margin: 0;
	padding: 0 1rem 1rem 0;
	*/
	gap: 0 40px;
    display: flex;
    flex-flow: column;
    justify-content: flex-start;
    align-items: flex-start;
}
	.stat h2 {
		font-family: "MarshSerif-Regular";
		font-size: clamp(4rem, 2.1818rem + 5.8182vw, 8rem);
		font-weight: normal;
		font-style: normal;
		line-height: 1;
	}
	.stat p {
		width: 100%;
		max-width: 240px;
	}



/*** work top level page grid ***/

#work-grid .grid-container {
  /**
   * User input values.
   */
  --grid-layout-gap: 0px;
  --grid-column-count: 3; /* This gets overridden by an inline style. */
  --grid-item--min-width: 200px; /* This gets overridden by an inline style. */
  
  /**
   * Calculated values.
   */
  --gap-count: calc(var(--grid-column-count) - 1);
  --total-gap-width: calc(var(--gap-count) * var(--grid-layout-gap));
  --grid-item--max-width: calc((100% - var(--total-gap-width)) / var(--grid-column-count));

  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(max(var(--grid-item--min-width), var(--grid-item--max-width)), 1fr));
  grid-gap: var(--grid-layout-gap);
  
  margin: 0 auto;
  width: 100%;
  /*max-width: 1600px;*/
  
}

#work-grid .grid-item a {
	display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
}

#work-grid .grid-item a {
	text-decoration: none !important;
}
#work-grid .grid-item h2 {
	margin: 0;
	padding: 0;
	font-family: "MarshSerif-Regular";
	font-size: clamp(1.6rem, 1.4544rem + 0.466vw, 2.2rem);
	font-weight: normal;
	font-style: normal;
	line-height: 1;
    max-width: 30rem;
    
    color: var(--midnightBlue);
    
    text-decoration: none;
}
.grid-item h3 {
	margin: 0 0 0.5rem 0;
	padding: 0;
	font-family: "Notosans-Regular";
	font-size: clamp(1rem, 0.9272rem + 0.233vw, 1.3rem);
	font-weight: normal;
	font-style: normal;
	line-height: 1;
    max-width: 30rem;
    
    color: var(--midnightBlue);
    
    text-decoration: none;
}

#work-grid .grid-item {
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	/*background: var(--neutral);*/
	font-size: 13px;
	overflow: hidden;
	
	/*height: 66vh;*/
	aspect-ratio: 1 / 1.25;
	z-index: 2;
	transform: scale(1);
	transition: transform 0.5s ease;
}

.preview {
	margin: 0;
	padding: 0;
	display: flex;
	overflow: hidden;
	width: 100%;
	/*height: 66.666%;*/
	height: 50%;
	order: 1;
}

.preview img {
	display: block;
	font-size: 0;
	min-width: 100%;
	min-height: 100%;
	object-fit: cover;
}
#work-grid .grid-item:hover {
	
	/*transform: scale(1.1); */
	transform: scale(clamp(1, 1.05, 1.1));
	transition: transform 0.5s ease;
	
	z-index: 666 !important;
}

.label {
	margin: 0;
	padding: clamp(16px, calc(13.714px + 0.714vw), 32px);
	display: flex;
	flex-flow: column nowrap;
	justify-content: flex-start;
	align-items: flex-start;
	width: 100%;
	/*height: 33.333%;*/
	height: 50%;
	background: var(--neutral);
	order: 2;
	transition: all 0.75s ease;
}
	.grid-item:hover .label {
		background: var(--midnightBlue);
		transition: all 0.75s ease;
	}

		#work-grid .grid-item:nth-of-type(1) .preview,
		#work-grid .grid-item:nth-of-type(3) .preview,
		#work-grid .grid-item:nth-of-type(4) .preview,
		#work-grid .grid-item:nth-of-type(6) .preview,
		#work-grid .grid-item:nth-of-type(7) .preview,
		#work-grid .grid-item:nth-of-type(9) .preview,
		#work-grid .grid-item:nth-of-type(10) .preview,
		#work-grid .grid-item:nth-of-type(12) .preview,
		#work-grid .grid-item:nth-of-type(13) .preview,
		#work-grid .grid-item:nth-of-type(15) .preview,
		#work-grid .grid-item:nth-of-type(16) .preview,
		#work-grid .grid-item:nth-of-type(18) .preview,
		#work-grid .grid-item:nth-of-type(19) .preview,
		#work-grid .grid-item:nth-of-type(21) .preview,
		#work-grid .grid-item:nth-of-type(22) .preview,
		#work-grid .grid-item:nth-of-type(24) .preview    {
			order: 1;
		}
		#work-grid .grid-item:nth-of-type(2) .preview,
		#work-grid .grid-item:nth-of-type(5) .preview,
		#work-grid .grid-item:nth-of-type(8) .preview,
		#work-grid .grid-item:nth-of-type(11) .preview,
		#work-grid .grid-item:nth-of-type(14) .preview,
		#work-grid .grid-item:nth-of-type(17) .preview,
		#work-grid .grid-item:nth-of-type(20) .preview,
		#work-grid .grid-item:nth-of-type(23) .preview {
			order: 3;
		}
		#work-grid .grid-item:nth-of-type(2) .label,
		#work-grid .grid-item:nth-of-type(5) .label,
		#work-grid .grid-item:nth-of-type(6) .label,
		#work-grid .grid-item:nth-of-type(8) .label,
		#work-grid .grid-item:nth-of-type(11) .label,
		#work-grid .grid-item:nth-of-type(14) .label,
		#work-grid .grid-item:nth-of-type(17) .label,
		#work-grid .grid-item:nth-of-type(20) .label,
		#work-grid .grid-item:nth-of-type(23) .label {
			justify-content: flex-end;
			align-items: flex-start;
		}

#work-grid .grid-item:hover h2,
#work-grid .grid-item:hover h3 {
	color: var(--skyBlue);
}




/*** responsive ***/
@media only screen and (max-width: 1200px) {

	#work-grid .grid-container {
		--grid-column-count: 2;
	}
		#work-grid .grid-item:nth-of-type(odd) .preview {
			order: 1;
		}
		#work-grid .grid-item:nth-of-type(even) .preview {
			order: 3;
		}
		#work-grid .grid-item:nth-of-type(odd) .label {
			justify-content: flex-start;
			align-items: flex-start;
		}
		#work-grid .grid-item:nth-of-type(even) .label {
			justify-content: flex-end;
			align-items: flex-start;
		}
	
}

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

	#work-grid .grid-container {
		--grid-column-count: 1;
	}
		#work-grid .grid-item:nth-of-type(odd) .preview,
		#work-grid .grid-item:nth-of-type(even) .preview {
			order: 1;
		}
		#work-grid .grid-item:nth-of-type(odd) .label,
		#work-grid .grid-item:nth-of-type(even) .label {
			justify-content: flex-start;
			align-items: flex-start;
		}
	
}

/**** case study pages ***/

.video .container {
	padding: 0 6rem;
}
section .container iframe {
	padding-left: 6rem;
	padding-right: 6rem;
}

@media (max-width: 800px) {

	.video .container {
		padding: 0 3rem;
	}
	section .container iframe {
		padding-left: 3rem;
		padding-right: 3rem;
	}
	
}

/*** case study inline images ***/

.image-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-areas:
        "image-one image-one image-two image-two";
    grid-gap: 0;
    gap: 0;
}

@media (max-width: 600px) {

	.image-grid {
		grid-template-columns: repeat(2, 1fr);
		grid-template-areas:
			"image-one image-one" "image-two image-two";
	}

}

.image-grid img, .image-grid img:hover {
	width: 100%;
	height: 100%;
	object-fit: cover;
	
	transform: scale(1);
}
	
/*** single 3/4 width image ***/
.three-quarters-width img {
	width: 75%;
}
/*** single full width image ***/
.full-width,
.full-width img {
	width: 100%;
}

@media (max-width: 800px) {

	.three-quarters-width img {
		width: 100%;
	}
	
}



/*** our people top level page grid ***/

#people-grid .grid-container {
  /**
   * User input values.
   */
  --grid-layout-gap: 0px;
  --grid-column-count: 5; /* This gets overridden by an inline style. */
  --grid-item--min-width: 200px; /* This gets overridden by an inline style. */
  
  /**
   * Calculated values.
   */
  --gap-count: calc(var(--grid-column-count) - 1);
  --total-gap-width: calc(var(--gap-count) * var(--grid-layout-gap));
  --grid-item--max-width: calc((100% - var(--total-gap-width)) / var(--grid-column-count));

  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(max(var(--grid-item--min-width), var(--grid-item--max-width)), 1fr));
  grid-gap: var(--grid-layout-gap);
  
  margin: 0 auto;
  width: 100%;
  /*max-width: 1600px;*/
  
}

#people-grid .grid-item a {
	display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
}

#people-grid .grid-item a {
	text-decoration: none !important;
}
#people-grid .grid-item h2 {
	margin: 0;
	padding: 0;
	font-family: "MarshSerif-Regular";
	font-size: clamp(1.6rem, 1.4544rem + 0.466vw, 2.2rem);
	font-weight: normal;
	font-style: normal;
	line-height: 1;
    max-width: 30rem;
    
    color: var(--midnightBlue);
    
    text-decoration: none;
}

#people-grid .grid-item p {
    margin-top: 0.5rem;
    padding-bottom: 1rem;
    color: var(--midnightBlue);
    
    text-decoration: none;
}

#people-grid .grid-item {
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	/*background: var(--neutral);*/
	font-size: 13px;
	overflow: hidden;
	
	/*height: 66vh;*/
	aspect-ratio: 1 / 1.5;
	z-index: 2;
	transform: scale(1);
	transition: transform 0.5s ease;
}

#people-grid .preview {
	margin: 0;
	padding: 0;
	display: flex;
	overflow: hidden;
	width: 100%;
	/*height: 50%;*/
	height: 65%;
	order: 1;
}

#people-grid .preview img {
	display: block;
	font-size: 0;
	min-width: 100%;
	min-height: 100%;
	object-fit: cover;
}
#people-grid .grid-item:hover {
	
	/*transform: scale(1.1); */
	transform: scale(clamp(1, 1.05, 1.1));
	transition: transform 0.5s ease;
	
	z-index: 666 !important;
}

#people-grid .label {
	margin: 0;
	padding: 15px clamp(15px, calc(10px + 0.5vw), 24px);
	display: flex;
	flex-flow: column nowrap;
	justify-content: flex-start;
	align-items: flex-start;
	width: 100%;
	/*height: 50%;*/
	height: 35%;
	background: var(--neutral);
	order: 2;
	transition: all 0.75s ease;
}
	#people-grid .grid-item:hover .label {
		background: var(--midnightBlue);
		transition: all 0.75s ease;
	}

#people-grid .grid-item:hover h2,
#people-grid .grid-item:hover p {
	color: var(--skyBlue);
}

/*** responsive ***/
@media only screen and (max-width: 1400px) {

	#people-grid .grid-container {
		--grid-column-count: 4;
	}

}
@media only screen and (max-width: 1000px) {

	#people-grid .grid-container {
		--grid-column-count: 3;
	}

}
@media only screen and (max-width: 600px) {

	#people-grid .grid-container {
		--grid-column-count: 2;
	}

}

#consent-banner {
width: 100%;
background: rgba(2, 33, 82, 0.9);
color: #fff;
position: fixed;
bottom: 0;
left: 0;
z-index: 3147483647;	
}
 
.trustarc-banner-body p {
    font-size: 12px !important;
    padding-bottom: 10px !important;
	max-width: 100%;
	padding: 0 0 0 0!important;
}