:root {
  --ease-Fred: cubic-bezier(0.16, 1, 0.3, 1);
}

body {
  -moz-osx-font-smoothing: grayscale!important;
  -webkit-font-smoothing: antialiased!important;
}


nav {
	padding-top: 10px;
}

.archive h1 {
	text-transform: capitalize;
	letter-spacing: 0;
	font-weight: 300;
	font-size: 24px;
}

nav {
display: inline-block;
vertical-align: top;
position: relative;
}

nav .name h1{
display: inline-block;
vertical-align: top;
}

nav a.flex-element {
	align-items: start!important;
}


.navigation .flex-element {
	align-items: start;
}

.nav-items ul {
padding: 0px;
	display: inline-block;
}
.nav-info {
	vertical-align: top;
}
.nav-items ul a {
display: block;
}
.nav-items ul li, nav .name h1 a, nav .name h1 span, .nav-info, .global-tagline h1, .global-tagline h1 span  {
/*font-family: 'Univers Next Pro', sans-serif; */
/*color: #1b1b1b;*/
  font-family: "instrument sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
font-size: 18px;
letter-spacing: -0.5px;
text-transform: capitalize;
font-style: normal;
line-height: 28px;

}

.nav-project-count {
	font-size: 16px;
	letter-spacing: -0.5px;
	vertical-align: top;
	line-height: 28px;
	letter-spacing: 0.65px;
}

.nav-items ul li:nth-child(1) {
/*margin-right: 40px;*/
}

/*********************************************
	Working Globally (Globe)
***********************************************/

.global-tagline {
	
}

.global-tagline h1, .global-tagline svg {
	display: inline-block;
}

.global-tagline svg {
	width: 40px;
	height: auto;
	vertical-align: middle;
	margin: 0px 8px;
	padding-bottom: 6px;
}
.global-tagline .bullet {
	width: 8px;
	height:8px;
	border-radius: 100%;
	background-color: #262626;
	vertical-align: middle;
	margin: 0px 8px 4px 8px;
}

.time {
	text-transform: uppercase!important;
}



/*********************************************
	Elevator Pitch
***********************************************/
body:not(.home) .elevator-pitch {
display: none;	
}

body.menu-open .elevator-pitch {
	display: none;
}

	
	
	
.elevator-pitch  {
width: 100%;	
padding: 16px 0px;
}


.elevator-pitch p {
width: 265px;	
}

.elevator-pitch p {
	font-family: "instrument sans", sans-serif;
	  font-optical-sizing: auto;
	  font-weight: 500;
	  font-style: normal;
	  
	font-size: 12px;
	letter-spacing: -0.5px;
	vertical-align: top;
	line-height: 14px;
}
	.elevator-pitch p:nth-child(1) {
	margin-bottom: 24px;	
	opacity: 85%;
	}
	
	.elevator-pitch p:nth-child(2), .elevator-pitch p:nth-child(2) a {	
	font-family: "instrument sans", sans-serif;
	  font-optical-sizing: auto;
	  font-weight: 600;
	  font-style: normal;
	  
	font-size: 12px;
	letter-spacing: 0px;
	vertical-align: top;
	line-height: 14px;
	}

.elevator-pitch p:nth-child(2) a {	
text-decoration: underline;
}



.single-work-information .container {
	    padding: 0 0vw;
	}    








/* =========   Section Method Hero :: ========== */

section.method-hero {
	padding: 64px 24px;
}

body.page-id-814 .marquee-wrapper {
	margin-top: 10vh!important;
}


section.method-hero .hero-detail {
	margin-top: 64px;
	
	-webkit-align-items: start;
	-ms-flex-align: start;
	align-items: start;
}

section.method-hero .hero-detail div:nth-child(1) {
	width: calc(25% - 1.25vw);
	padding: 24px 0px;
}

.featured-casestudy {
	padding: 0px 0px!important;
}

.hero-detail .flex-container {
	/*border: 1px solid black; */
	padding: 24px;
}

.featured-casestudy {
	width: calc(10vw - 3.5px)!important;
	height: 13vw!important;
	/*background-color: red;*/
}

.featured-impact.flex-element {
	padding: 24px;

	
	-webkit-align-items: start;
	-ms-flex-align: start;
	align-items: start;
	
	-webkit-flex-direction: column;
	-ms-flex-direction: column;
	flex-direction: column; 
	}







  /*********** Scrolljacking cards  ************/

  .scroll-hint {
	margin-top: 60px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	font-size: 11px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--muted);
  }
  
  .scroll-hint .line {
	width: 1px;
	height: 48px;
	background: var(--muted);
	animation: pulse-line 1.8s ease-in-out infinite;
  }
  
  @keyframes pulse-line {
	0%, 100% { opacity: 0.3; transform: scaleY(1); }
	50% { opacity: 1; transform: scaleY(1.2); }
  }
  
  /* ─── STICKY WRAPPER ─── */
  /* This is the scroll-jacking container. Its height defines how long
	 the user "stays" on this section while scrolling. */
  #sticky-wrapper {
	/* 4× viewport = intro image (100vh) + 3 cards (each ~100vh of scroll travel) */
	height: 500vh;
	position: relative;
  }
  
  #sticky-inner {
	position: sticky;
	top: 0;
	height: 100vh;
	overflow: hidden;
  }
  
  /* ─── FULL-BLEED BG IMAGE ─── */
  .bg-image {
	position: absolute;
	inset: 0;
	z-index: 0;
  }
  
  .bg-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
  }
  
  /* Dark overlay */
  .bg-image::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(
	  to right,
	  rgba(26,23,20,0.72) 0%,
	  rgba(26,23,20,0.35) 55%,
	  rgba(26,23,20,0.15) 100%
	);
  }
  
  /* Grain texture overlay */
  .grain {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	opacity: 0.045;
	background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
	background-size: 200px 200px;
  }
  
  /* ─── HERO TEXT (shown on bg image) ─── */
  .hero-text {
	position: absolute;
	z-index: 3;
	left: 7vw;
	bottom: 12vh;
	color: var(--cream);
	max-width: 560px;
	transition: opacity 0.4s ease, transform 0.4s ease;
  }
  
  .hero-text .eyebrow {
	font-size: 11px;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	color: rgba(245,240,232,0.55);
	margin-bottom: 20px;
  }
  
  .hero-text h2 {
	font-family: 'Cormorant Garamond', serif;
	font-size: clamp(36px, 5vw, 68px);
	font-weight: 300;
	line-height: 1.05;
	margin-bottom: 20px;
  }
  
  .hero-text h2 em { font-style: italic; }
  
  .hero-text p {
	font-size: 14px;
	line-height: 1.7;
	color: rgba(245,240,232,0.65);
  }
  
  /* Progress indicator */
  .progress-bar {
	position: absolute;
	bottom: 0;
	left: 0;
	height: 3px;
	width: 0%;
	background: var(--rust);
	z-index: 10;
	transition: width 0.05s linear;
  }
  
  /* ─── HORIZONTAL CARDS TRACK ─── */
  .cards-track-outer {
	position: absolute;
	inset: 0;
	z-index: 4;
	display: flex;
	align-items: center;
	overflow: hidden;
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.5s ease;
  }
  
  .cards-track-outer.visible {
	pointer-events: auto;
	opacity: 1;
  }
  
  /* Background dims when cards appear */
  .cards-track-outer::before {
	content: '';
	position: absolute;
	inset: 0;
	background: rgba(26,23,20,0.6);
	backdrop-filter: blur(2px);
	-webkit-backdrop-filter: blur(2px);
  }
  
  .cards-track {
	display: flex;
	gap: 28px;
	padding: 0 7vw;
	/* will be translated by JS */
	transform: translateX(0px);
	transition: transform 0.08s linear;
	position: relative;
	z-index: 2;
	will-change: transform;
  }
  
  /* ─── CARD ─── */
  .card {
	background: var(--cream);
	flex-shrink: 0;
	width: clamp(300px, 36vw, 480px);
	height: var(--card-h);
	display: flex;
	flex-direction: column;
	overflow: hidden;
	position: relative;
	border-top: 3px solid transparent;
	transition: border-color 0.3s;
  }
  
  .card:hover {
	border-color: var(--rust);
  }
  
  .card-img {
	width: 100%;
	height: 55%;
	overflow: hidden;
	flex-shrink: 0;
  }
  
  .card-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.6s cubic-bezier(0.4,0,0.2,1);
  }
  
  .card:hover .card-img img {
	transform: scale(1.04);
  }
  
  .card-body {
	padding: 28px 28px 24px;
	display: flex;
	flex-direction: column;
	flex: 1;
  }
  
  .card-tag {
	font-size: 10px;
	letter-spacing: 0.25em;
	text-transform: uppercase;
	color: var(--rust);
	margin-bottom: 12px;
  }
  
  .card-title {
	font-family: 'Cormorant Garamond', serif;
	font-size: clamp(22px, 2.5vw, 30px);
	font-weight: 400;
	line-height: 1.15;
	margin-bottom: 12px;
  }
  
  .card-title em { font-style: italic; }
  
  .card-desc {
	font-size: 13px;
	line-height: 1.7;
	color: var(--muted);
	flex: 1;
  }
  
  .card-footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 16px 28px;
	border-top: 1px solid var(--sand);
  }
  
  .card-num {
	font-family: 'Cormorant Garamond', serif;
	font-size: 36px;
	color: var(--sand);
	font-weight: 300;
	line-height: 1;
  }
  
  .card-link {
	font-size: 11px;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: var(--ink);
	text-decoration: none;
	display: flex;
	align-items: center;
	gap: 8px;
	transition: color 0.25s, gap 0.25s;
  }
  
  .card-link:hover {
	color: var(--rust);
	gap: 14px;
  }
  
  .card-link span { font-size: 16px; }
  
  /* ─── CARD ENTRANCE ANIMATIONS ─── */
  .card {
	opacity: 0;
	transform: translateY(30px);
	transition: opacity 0.6s ease, transform 0.6s ease, border-color 0.3s;
  }
  
  .card.entered {
	opacity: 1;
	transform: translateY(0);
  }
  
  .card:nth-child(1) { transition-delay: 0s; }
  .card:nth-child(2) { transition-delay: 0.12s; }
  .card:nth-child(3) { transition-delay: 0.24s; }
  
  /* ─── SCROLL COUNTER ─── */
  .scroll-counter {
	position: absolute;
	z-index: 5;
	top: 32px;
	right: 40px;
	color: rgba(245,240,232,0.45);
	font-size: 11px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
  }
  
  .scroll-counter span {
	color: var(--cream);
	font-size: 16px;
	font-family: 'Cormorant Garamond', serif;
  }
  
  /* Card position dots */
  .dots {
	position: absolute;
	z-index: 6;
	bottom: 28px;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	gap: 10px;
	opacity: 0;
	transition: opacity 0.4s;
  }
  
  .dots.visible { opacity: 1; }
  
  .dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: rgba(245,240,232,0.3);
	transition: background 0.3s, transform 0.3s;
  }
  
  .dot.active {
	background: var(--rust);
	transform: scale(1.4);
  }
  
  /* ─── AFTER SECTION ─── */
  .after-section {
	height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 40px;
  }
  
  .after-section p {
	font-family: 'Cormorant Garamond', serif;
	font-size: clamp(28px, 4vw, 52px);
	font-weight: 300;
	color: var(--muted);
	line-height: 1.3;
  }




  /*********** END Scrolljacking cards  ************/













/* =========   Section Method Workflow :: ========== */


section.method-workflow {
	padding: 220px 24px;
}


section.method-workflow .lead-in div {
	width: 50%;
	-webkit-align-items: start;
	-ms-flex-align: start;
	align-items: start;
}


section.method-workflow .lead-in:nth-child(1) {
	margin-bottom: 64px;
}



/* ================================
	   Accordion Base
	================================ */
	.accordion {
	 /* max-width: 720px;*/
	  margin: 0 auto;
	}
	
	/* ================================
	   Accordion Item
	================================ */
	.accordion-item {
	border-bottom: 1px solid #e0e0e0;
	  position: relative;
	  width: 100%!important;
	
	transition: opacity 0.65s cubic-bezier(0.4,0,0.2,1);
			-webkit-transition: opacity 0.65s cubic-bezier(0.4,0,0.2,1);
	
	}
	
	.accordion:hover .accordion-item:not(:hover) {
	opacity: .16;
	  transition: opacity 0.65s cubic-bezier(0.4,0,0.2,1);
	  -webkit-transition: opacity 0.65s cubic-bezier(0.4,0,0.2,1);
	
}
	
	
	
	/* ================================
	   Trigger (Clickable Header)
	================================ */
	.accordion-trigger {
	  all: unset; /* critical: removes native button issues */
	  width: 100%;
	  display: flex;
	  justify-content: space-between;
	  align-items: center;
	  padding: 1.25rem 0;
	  cursor: pointer;
	  box-sizing: border-box;
	}
	
	.accordion-trigger:focus-visible {
	 /* outline: 2px solid #000;
	  outline-offset: 4px;*/
	}
	
	/* ================================
	   Headline (Visible in both states)
	================================ */
	.accordion-headline {
	 /* font-size: 1.125rem;
	  font-weight: 500;
	  line-height: 1.3; */
	}
	
	/* ================================
	   Icon (+ / −)
	================================ */
	.accordion-icon {
	  position: relative;
	  width: 16px;
	  height: 16px;
	  flex-shrink: 0;
	}
	
	.accordion-icon::before,
	.accordion-icon::after {
	  content: "";
	  position: absolute;
	  background-color: #000;
	}
	
	.accordion-icon::before {
	  width: 100%;
	  height: 2px;
	  top: 50%;
	  left: 0;
	  transform: translateY(-50%);
	}
	
	.accordion-icon::after {
	  width: 2px;
	  height: 100%;
	  left: 50%;
	  top: 0;
	  transform: translateX(-50%);
	  transition: transform 0.3s ease;
	}
	
	.accordion-item.is-open .accordion-icon::after {
	  transform: translateX(-50%) scaleY(0);
	}
	
	/* ================================
	   Content Wrapper (Animated Height)
	================================ */
	.accordion-content {
	  height: 0;
	  overflow: hidden;
	  will-change: height;
	  width: 100%!important;
	}
	
	/* ================================
	   Inner Content
	================================ */
	.accordion-inner {
	  padding-bottom: 1.25rem;
	  width: 100%!important;
	}
	
	/* ================================
	   Typography Defaults
	================================ */
	.accordion-inner p {
	  margin: 0 0 0.75rem;

	font-size: 1.5vw;
	font-weight: 400;
	letter-spacing: .25px;
	text-align: left;
	line-height: 2.35vw;
	}
	
	.accordion-inner p:last-child {
	  margin-bottom: 0;
	}
	
	/* ================================
	   Optional Motion Polish
	================================ */
	.accordion-item.is-open .accordion-headline {
	  /*font-weight: 600;*/
	}









/* =========   Page :: Method :: Industries :: ========== */
	
	
	/*section.method-workflow {
		padding: 220px 24px;
	}
	
	
	section.method-workflow .lead-in div {
		width: 50%;
		-webkit-align-items: start;
		-ms-flex-align: start;
		align-items: start;
	}
*/


section.method-workflow.industries .lead-in:nth-child(2) {
	padding-top: 200px;
}

section.method-workflow.industries .lead-in .image-frame, .image-slide {
width: 100%!important;
}

section.method-workflow.industries .lead-in:nth-child(1) div {
	width: 100%;
}

.Industry-Image {
	width: 185px!important;
	height: 220px;
	/*background: black;*/
	margin-right: 40px;
}

.image-slide img {
	display: none;
}

.industry-list {
	width: calc(100% - 249px)!important;
}

section.method-workflow div.industry-copy {
	width: 35%;
	margin-right: 120px;

}


section.method-workflow .lead-in div.industry-details {
	width: calc(65% - 120px);
}

.industry-list div{
	width: 100%!important;
	
	font-size: 1.5vw;
	line-height: 2vw;
	font-weight: 400;
	text-transform: none;
	text-align: left;
	border-bottom: solid 1px;
	padding: 24px 0px;
}








/*******************
Claude ***************/



.item-list {
  list-style: none;
  
  width: 100%;
}

.item-list li {
  cursor: pointer;
  position: relative;

	font-size: 1.5vw;
	  line-height: 2vw;
	  font-weight: 400;
	  text-transform: none;
	  text-align: left;
	  border-bottom: 1px solid #e0e0e0;
	  padding: 24px 0px;
	  
  transition: opacity 0.65s cubic-bezier(0.4,0,0.2,1);
		-webkit-transition: opacity 0.65s cubic-bezier(0.4,0,0.2,1);

}

.item-list:hover li:not(:hover) {
opacity: .16;
  transition: opacity 0.65s cubic-bezier(0.4,0,0.2,1);
  -webkit-transition: opacity 0.65s cubic-bezier(0.4,0,0.2,1);


}




.item-list li:hover .item-inner {
  padding-left: 16px;
}



/* RIGHT: Image */
.image-side {
  position: sticky;
  top: 80px;
}

.image-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 4/5;
  overflow: hidden;

}



.image-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: scale(1.04);
  transition: opacity 0.55s cubic-bezier(0.4,0,0.2,1),
			  transform 0.55s cubic-bezier(0.4,0,0.2,1);
-webkit-transition: opacity 0.55s cubic-bezier(0.4,0,0.2,1),
  					transform 0.55s cubic-bezier(0.4,0,0.2,1);
}

.image-slide.active {
  opacity: 1;
  transform: scale(1);
}

.image-slide img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  filter: grayscale(20%);
}

















	/* =========  END     Page :: Method :: Industries :: ========== */






















/*********************************************
		Test Home Slider
	***********************************************/

	
	.test-slider {
	  display: flex;
	  height: 100vh;
	}
	
	
	.main {
		width: 50vw;
		position: relative;
		margin-left: calc(50% - 220px);
		display: flex;
	  
	  -webkit-flex-direction: column;
		-ms-flex-direction: column;
		flex-direction: column; 
	}
	
	.main-content {
		width: 100%;
		height: 50vh;
		
	display: flex;
	flex-direction: column; /* Sets the main axis vertically */
	  justify-content: flex-end; /* Aligns items to the end of the vertical main axis (bottom) */
	  align-items: flex-end;
	}
	
	.test-main-image {
	
	  background-size: cover;
	  background-position: center;
	  transition: background-image 0.4s ease;
	  
	  width: 100%;
	  height: 50vh;
	  display: inherit;
	  -webkit-align-items: flex-end;
	  -ms-flex-align: end;
	  align-items: flex-end;
	}
	
	.rail {
	  width: 220px;
	  height: 100vh;
	  overflow: hidden;
	  position: relative;
	 /* z-index: -1;*/
	}
	
	.rail-track {
	  position: absolute;
	  top: 0;
	  left: 0;
	  width: 100%;
	}
	
	
	
	.rail::before {
		content: '';
		/* Position the pseudo-element over the content */
		position: absolute; 
		top: 0;
		left: 0;
		right: 0;
		bottom: unset;
		height: 300px;
		/* Create the white gradient overlay */
		background-image: linear-gradient(to top, 
											rgba(251, 251, 251, 0) 0%, /* Transparent at the bottom */
											rgba(251, 251, 251, 1) 25%); /* White at the top */
		/* Ensure the gradient is on top of the content */
		z-index: 1; 
		/* Adjust opacity if needed, but the rgba values handle transparency in the gradient itself */
	}
	
	
	
	
	
	
/************	Thumb   **********/
	
	.thumb {
	  padding: 8px;
	  box-sizing: border-box;
	  cursor: pointer;
	  opacity: 1;
	  width: 100%;
	  height: 64px;
	  margin-bottom: 16px; 
	  
	  will-change: transform, opacity;
	  transition: opacity 0.6s var(--ease-Fred);
	  /*margin-top: 60px;
	  margin-bottom: 60px;*/
	 /* transition: opacity 0.6s ease-in-out, background-color 0.6s ease-in-out;
	  -webkit-transition: opacity 0.6s ease-in-out, background-color 0.6s ease-in-out;*/
	}
	
	.thumb.is-active {
	  opacity: 1;
	 /* transform: scale(1);*/
	}
	

	.thumb-inner {
	 /* transform: scale(1);*/
	 /* transition: transform 0.6s ease-in-out, background-color 0.6s ease-in-out;
	  -webkit-transition: transform 0.6s ease-in-out, background-color 0.6s ease-in-out;*/

	   display: flex;
	   /*flex-direction: column;*/
	   align-items: center;
	}
	
	
	
	.thumb-mask {
		height: 52px;
		width: 52px;
		position: relative;
		overflow: hidden;
		transition: padding 0.25s ease, background-color 0.25s ease;
		
	}
	
	
	.thumb .thumb-mask img {
    width: 100%;
	 height: 100%;
	 object-fit: cover;

	 display: block;
	 
	  pointer-events: none;
	  vertical-align: middle;

	  opacity: .35;
	  
	  transform: none !important;
	  /*transform-origin: center center;*/
	  /*transition-timing-function: cubic-bezier(.16,1,.3,1);
	  transition:
		transform 0.8s var(--ease-Fred),
		opacity 0.8s var(--ease-Fred); */
				
	/*transition: transform 0.6s ease-in-out, background-color 0.6s ease-in-out;
	-webkit-transition: transform 0.6s ease-in-out, background-color 0.6s ease-in-out;*/
	}
	
	
	/*.thumb:hover .thumb-mask {
	  padding: 8px; 
	  box-sizing: border-box;
	  background-color: #fbfbfb; 
	}
	*/
	
	.thumb-mask::before {
	  content: "";
	  position: absolute;
	  inset: 0;
	  border: 0px solid #fbfbfb; 
	  box-sizing: border-box;
	  transition: border-color 0.25s ease;
	  background: transparent;
	}
	
	.thumb .thumb-mask .thumb-overlay{
		position: absolute;
		 top: 0px;
		   left: 0px;
		   right: 0px;
		   bottom: 0px;
		  border: 0px solid #fbfbfb; /* invisible initially */
		  box-sizing: border-box;
		  
		 transition: border 0.35s ease-out;
		 -webkit-transition: border 0.35s ease-out;
	}
	
	.thumb.is-active .thumb-mask .thumb-overlay {
		position: absolute;

		  top: 0px;
		  left: 0px;
		  right: 0px;
		  bottom: 0px;
		  border: 6px solid #fbfbfb; /* invisible initially */
		  box-sizing: border-box;
		
		transition: border 0.35s ease-out;
		-webkit-transition: border 0.35s ease-out;
	}
	
	.thumb:hover .thumb-mask .thumb-overlay {
		position: absolute;
		  top: -1px;
		  left: -1px;
		  right: -1px;
		  bottom: -1px;
		  border: 6px solid #fbfbfb; /* invisible initially */
		  box-sizing: border-box;
		
		transition: border 0.35s ease-out;
		-webkit-transition: border 0.35s ease-out;
	}
	
	
	
	
	
	
	
	.thumb:hover .thumb-mask img {
	  opacity: 1;
	  
	  transition: opacity 0.6s ease-in-out;
	  -webkit-transition: opacity 0.6s ease-in-out;
	}
	
	
	
	
	.thumb.is-active .thumb-inner img {
	  opacity: 1;
	  /*transform: scale(.9);
	  transform-origin: center center;
	  transition:
	  transform 0.8s var(--ease-Fred),
	  opacity 0.8s var(--ease-Fred); */
	  
	  transition: opacity 0.6s ease-in-out;
		-webkit-transition: opacity 0.6s ease-in-out;
	}
	
	
	
	.thumb .thumbnail-title {
		display: inline-block;
		vertical-align: middle;
		padding-left: 16px;
		
		opacity: 0;
		transition: opacity 0.6s ease-in-out;
		-webkit-transition: opacity 0.6s ease-in-out;
	}

	
	.thumb.is-active .thumbnail-title {
		opacity: 1;
		transition: opacity 0.6s ease-in-out;
		-webkit-transition: opacity 0.6s ease-in-out;
	}


.thumbnail-title h1 {
	font-family: "instrument sans", sans-serif;
	font-optical-sizing: auto;
	font-weight: 600;
	font-style: normal;
	font-size: 12px;
	letter-spacing: .15px;
	vertical-align: top;
	line-height: 14px;
}


.thumbnail-title h1:nth-child(1) {
margin-bottom: 2px;
}
	

.thumbnail-title h1:nth-child(2) {
opacity: 35%;	
font-weight: 500;
font-size: 12px;
line-height: 14px;
}
	

.thumb:hover .thumbnail-title {
	opacity: 1;
		transition: opacity 0.6s ease-in-out;
	-webkit-transition: opacity 0.6s ease-in-out;
}


.thumb:hover {
	opacity: 1!important;
		transition: opacity 0.6s ease-in-out;
	-webkit-transition: opacity 0.6s ease-in-out;
}












/******* Main Actions ******/
.main-link {
text-decoration: none !important;
font-family: "instrument sans", sans-serif;
font-optical-sizing: auto;
font-weight: 400;
font-style: normal;
font-size: 16px;
letter-spacing: -0.5px;
text-transform: capitalize;
font-style: normal;
line-height: 24px;
	
}

.main-title {
	font-size: 6vw;
	letter-spacing: -.3vw;
	text-align: left;
	text-transform: capitalize;
	text-decoration: none;
	display: block;
	width: 100%;
	line-height: 6.2vw;
	vertical-align: middle;
	font-weight: 400;
	margin-bottom: 40px;
	margin-left: -7px;
}

.main-actions {
	width: 100%;
	display: flex;
	
	-webkit-justify-content: space-between;
	-ms-flex-pack: justify;
	justify-content: space-between;
	
	padding-right: 8px;
}



.main-actions a, .main-industry  {
	display: inline-flex;
	width: auto!important;
	
	text-decoration: none !important;
	font-family: "instrument sans", sans-serif;
	font-optical-sizing: auto;
	font-weight: 400;
	font-style: normal;
	font-size: 16px;
	letter-spacing: -0.5px;
	text-transform: capitalize;
	font-style: normal;
	line-height: 24px;
}











/*********************************************
	Home Hero Slider Project Titles
***********************************************/


.displayed-project {
	width: calc(50% + 8px);
	height: auto !important;
	position: relative;
	margin-left: calc(50% - 8px);
	margin-bottom: 8px!important;
	padding-right: 8px;
	
}

.displayed-project h2  {
	width: 100%;
	font-weight: 400;
	font-size: 6vw;
	letter-spacing: -3px;
	text-align: left;
	text-transform: capitalize;
	text-decoration: none;
	display: block;
	width: 100%;
	line-height: 6.2vw;
	vertical-align: middle;
	font-weight: 400;
	
	margin-bottom: 40px;
	}


.displayed-project a {
	text-decoration: none!important;
	font-family: "instrument sans", sans-serif;
	  font-optical-sizing: auto;
	  font-weight: 400;
	  font-style: normal;
	font-size: 16px;
	letter-spacing: -0.5px;
	text-transform: capitalize;
	font-style: normal;
	line-height: 24px;
	
}

.displayed-project .slide-actions {
	display: flex;
	-webkit-justify-content: space-between;
	-ms-flex-pack: justify;
	justify-content: space-between;
	
	
	margin-left: 8px;
}

.displayed-project .slide-actions a {
	display: inline-flex;
	width: auto!important;
}

.displayed-project .slide-actions a:nth-child(2) {

}



.project-title {
	width: 100%!important; 
	margin-right: 0px!important; 
}







/*********************************************
Featured Media Cards
***********************************************/

.featured-project-media {
	width: 100%;
	height: auto;
}

.featured-project-media video {
	width: 100%;
}










/*********************************************
Marquee
***********************************************/

.single-work-information .marquee-wrapper {
	margin-top: 10vh!important;
}


.marquee-wrapper {
	  height: auto;
	  width: 100%;
	  //background: red;
	  position: relative;
	  display: flex;
	  align-items: center;
	  overflow: hidden;
	  margin-bottom: 60px;
	  margin-top: 40vh;
	}
	
	.marquee-item {
	  display: flex;
	  align-items: center;
	  justify-content: center;
	  //background: pink;
	  height: 100%;
	  width: auto;
	  margin: 0;
	  padding: 0;
	  position: relative;
	  flex-shrink: 0;
	  overflow: hidden;
	  //color: blue;
	}
	.marquee-item h2.display {
	margin-bottom: 0px!important;
	margin-top: 0vh!important;
}
	
.marquee-item span {
		width: 160px;
		height: 160px;
	}
	
	.marquee-item:nth-child(even) {
		margin-left: 20px;
		margin-right: 20px;
	}
	
	/*********************************************
			
		END Marquee
		
	***********************************************/










	/*********************************************
			
			Archive Alternate 
			
		***********************************************/

.page-id-694 header, .archive-project .project-description {
	/*background-color: #f6f4f4; 
	background-color: #fffef8;*/
	background-color: #fbfbfb;
	border-top: solid 1px;
}

.page-id-694 .archive-project h1.client {
font-size: 24px;
}

.page-id-694  .archive-project h1 {
opacity: 1;
}

.page-id-694 .archive ul {
	width: 300px !important;
}

.page-id-694 .archive ul li {
	display: inline;
}

.page-id-694 .archive-project h1 {
padding: 5px 5px;
}

.word {
	overflow: hidden;
	will-change: transform;
}
.image-scale {
	width: 100vw;
	height: 100vh;
	padding: 0px 0px!important;
	margin: 0px 0px!important;
	overflow: hidden;
	will-change: transform;
}

.image-scale div {
	width: 100%;
	height: 100%;
	overflow: hidden;
	margin-left: auto;
	margin-right: auto;
	will-change: transform;
}



.archive-project {
	padding: 0px 0px 0px 0px!important;
}

/*
.container, .word {
	height: fit-content;
	position: relative;
}*/

/*
.project, .thumbnail {
will-change: transform;
} */

/*
.project {
	position: sticky!important;
	top: 100px!important;
}
*/

/*********************************************
		
		Playground 
		
	***********************************************/

.playground {
		padding: 200px;
		padding-left: 20px;
		padding-right: 0px;
	}

.playground .container {
		padding: 0px 0px;
	}

.playground .project .thumbnail {
		width: 100%;
		height: auto;
		opacity: 1;
		position: relative;
		top: unset;
		bottom: unset;
		right: unset;
		left: unset;
		/*-webkit-transform: scale(1);
		transform: scale(1);
		transition: transform .5s ease-in-out;
		-webkit-transition: transform .5s ease-in-out;*/
	}
	
.playground	.project-thumbnail {
		min-height: unset;
		display: inline-block;
	}

.playground .project {
		width: calc(10vw - 3.5px)!important;
		display: inline-block;
		vertical-align: top;
		margin: 0px 0px;
		margin-bottom: 0px;
		-webkit-transform: scale(1);
		transform: scale(1);
		min-height: unset; 
		margin: 0px 0px;
		margin-bottom: 120px;
	}
	
.playground .project:nth-child(odd), .playground .project:nth-child(even) {
		padding-top: 0px;
		padding-right: 20px;
		padding-left: 0px;
	}


	
	
	.playground .project-description {
		display: inline-block;
		padding: 0px 0px;
		width: 100%;
		margin-bottom: 8px;
	}
	
	
	.playground .project-description h2 {
		display: block;
		font-size: 12px;
		font-weight: 500;
		line-height: 14px;
		text-transform: capitalize;
		text-align: left;
	}
	
	
	
/*********************************************
	
	ARCHIVE 
	
***********************************************/



	
.archive {
padding-top: 220px;
margin-bottom: 4vw;

	transition: opacity .35s ease-out;
	-webkit-transition:  opacity .35s ease-out;

}
.archive h1, .archive ul li {
	font-size: 14px;
	transition: opacity .35s ease-out;
	-webkit-transition:  opacity .35s ease-out;
}
	



.archive .container {

margin-left: 0;
padding: 0px 0px;
position: relative;
}


.archive-project {

padding: 20px 0px;
}


.archive-project h1 {
padding: 15px 5px;
width: auto;


}



h1.client {
width: 50vh;
}



h1.archive-order {
width: 100px;
}

.archive .project-item {
width: 30%;

}
.archive .year, .archive .industry {
	width: 200px!important;
	margin-bottom: 0px!important;
	
}

.archive a {
	width: 100%;
	display: unset;
	cursor: pointer;
	text-decoration: none;
	transition: opacity .35s ease-out;
	-webkit-transition:  opacity .35s ease-out;
}
.archive {
	transition: opacity .35s ease-out;
	-webkit-transition:  opacity .35s ease-out;
	padding-bottom: 200px;
}
.archive:hover .archive-project{
	opacity: 1;
	
	transition: opacity .35s ease-out;
	-webkit-transition:  opacity .35s ease-out;
}
.archive-project h1 {
	opacity: .5;
	transition: opacity .35s ease-out;
	-webkit-transition:  opacity .35s ease-out;
}

.archive-project h1.client {
font-size: 48px;
opacity: 1;
	transition: opacity .65s ease-out;
	-webkit-transition:  opacity .65s ease-out;
}
.archive .archive-project {
	transition: opacity .65s ease-out;
	-webkit-transition:  opacity .65s ease-out;
	position: relative;
}

/*
.archive:hover .archive-project:not(:hover) {
	opacity: .15;
	
	transition: opacity .35s ease-out;
-webkit-transition:  opacity .35s ease-out;
}

*/


/*****************************
	 
	 OVERRIDES
	 
***************************/


.archive-project .container {
padding: 0px;
}


.archive-project .project {
min-height: auto;
}


.archive-project .project-description { 
width: 100%;
padding: 0px;

display: flex;
display: -webkit-flex;
display: -ms-flexbox;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
}




/*****************************
	 
	 Single Work information
	 
***************************/



/*****************  Single Work Hero ****************/


.single-work-hero {
	width: 100%;
	padding: 56px 24px 0px 24px;
}


.highlights.single-work-hero {
	border-top: solid 1px;
	padding-top: 0px!important;
}


.highlights.single-work-hero div.flex-element:nth-child(1) {
	padding-top: 24px!important;
}

.single-work-hero div.flex-element:nth-child(1) {
	width: calc(25% - 1.25vw);
	display: block;
}

.single-work-hero div.flex-element:nth-child(2) {
	width: calc(60% - 2.65vw);
}

.single-work-information .single-work-hero .intro .flex-container  {
	width: 100%;	
}

.single-work-information .single-work-hero .intro .flex-container {
	font-size: 1.5vw;
	line-height: 2vw;
	font-weight: 400;
	text-transform: none;
	text-align: left;	
	border-bottom: solid 1px;
	padding: 24px 0px;
}

.single-work-hero div.flex-element:nth-child(1) h4 {
	display: block;
	width: 100%;
}

.single-work-hero div.flex-element:nth-child(1) h4:nth-child(1) {
	margin-bottom: 64px;
}

.single-work-hero h3, .single-work-hero p {
	margin-bottom: 64px;
}

.single-work-information .flex-container .intro .flex-container {
	margin-top: 0px!important;
}

.single-work-information .flex-container .intro .flex-container .flex-element {
	-webkit-align-items: start;
	-ms-flex-align: start;
	align-items: start;
}

.intro .flex-container .flex-element:nth-child(1), .case-study-text-block .flex-container.list-item  {
	
	display: flex;
	display: -webkit-flex;
	display: -ms-flexbox;
	
	-webkit-align-items: start;
	-ms-flex-align: start;
	align-items: start;
}

/*****************  End Single Work Hero ****************/













/*****************   Single Work Historic Overview ****************/

.historic-overview {
	padding: 120px 24px;
	-webkit-align-items: start;
	-ms-flex-align: start;
	align-items: start;
	
	
}

.historic-overview .highlights {
	width: calc(25% - (48px / 3));
	-webkit-align-items: start;
	-ms-flex-align: start;
	align-items: start;
	padding: 120px 16px;
	border-top: solid 0px;
}

.historic-overview .highlights .intro, .historic-overview .highlights .flex-element.two_columns {
	width: 100%;
	-webkit-align-items: start;
	-ms-flex-align: start;
	align-items: start;
		
	
}

.historic-overview .highlights .intro .flex-container.align-items-stretch, .historic-overview .highlights .intro .flex-container.align-items-stretch .flex-element {
-webkit-align-items: start;
-ms-flex-align: start;
align-items: start;
}


/*****************   End Single Work Historic Overview ****************/














/*****************  Case Study Layout ::: Text Block List Items ****************/

.text_block_list {
	width: 100%;
	margin-top: 64px;
}

.text_block_list h4 {
	width: 100%;
	border-bottom: solid 1px;
	padding: 24px 0px;
	
	font-size: 1.5vw;
	line-height: 2vw;
	font-weight: 400;
	text-transform: none;
	text-align: left;	
}

.text_block_list ul {
	width: 100%;
}

.text_block_list li.list-item {
	font-size: 1.5vw;
	line-height: 2vw;
	font-weight: 400;
	text-transform: none;
	text-align: left;	
	
	width: 100%;
	border-bottom: solid 1px;
	padding: 24px 0px;
}

/*****************  End Case Study Layout ::: Text Block List Items ****************/














.single-work-information h6.label{

	display: block;

	  font-family: "instrument sans", sans-serif;
	  font-optical-sizing: auto;
	  font-style: normal;
	

	font-size: 12px;
	font-weight: 700;
	letter-spacing: 1px;
	text-transform: uppercase;
}

.single-work-information p, .single-work-information .details li, .archive ul li   {

/*  OLD
	font-size: 14px;
	font-weight: 400;
	line-height: 21px;
	letter-spacing: 0px;
	text-transform: unset;
	font-style: normal; */
	
	font-size: 1.15vw;
	font-weight: 400;
	letter-spacing: 0.5px;
	text-align: left;
	line-height: 2.15vw;
	text-transform: unset;
}

.single-work-information .client {
	width: auto!important;
	display: block!important;
	padding-left: 10px;
}

.details, .overview {
webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
	/*max-width: 600px; */
	
	-webkit-align-items: flex-start;
	-ms-flex-align: start;
	align-items: flex-start;
}

.mediums, .delivery, .role, .keyFeatures, .achievements, .year   {
	-webkit-flex-direction: column;
	-ms-flex-direction: column;
	flex-direction: column;
	width: 50%!important;

} 

.mediums, .delivery, .role, .keyFeatures, .achievements,  .year    {
margin-bottom: 40px;
}


.keyFeatures ul, .achievements ul {
margin-bottom: 0px;
}





/*
.details .overview {
	margin-bottom: 60px;
	padding-right: 60px;
}

*/



.small {
	height: 700px!important
}


.archive  h2.display {
	font-weight: 500;
line-height: 190px;
overflow-y: hidden;
/*margin-bottom: 60px;
margin-top: 40vh;*/
padding-left: 10px;
padding-right: 20px;
font-size: 220px;
letter-spacing: -.5vw;
text-transform: capitalize;
}
.archive ul li {
text-transform: uppercase;
}



/*****


Home

****/
.capabilities {
	display: flex;
	display: -webkit-flex;
	display: -ms-flexbox;
	-webkit-justify-content: space-between;
	-ms-flex-pack: justify;
	justify-content: space-between;
}


h2.more-work-title {
 font-family: "instrument sans", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
}

.getInTouch {
display: flex;
display: -webkit-flex;
display: -ms-flexbox;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
}


.leading-anecdote {
text-transform: uppercase;
letter-spacing: 0px;
vertical-align: middle;
line-height: 12px;
margin-right: 16px;
font-size: 12px;
width: 84px;
	display: inline-block;
}
.personality-statement {
margin-right: 0 !important;
	width: 200px;
	display: block;
	text-transform: uppercase;
	letter-spacing: 0px;
	vertical-align: top;
	line-height: 12px;
	font-size: 12px;
	line-height: 14px;
}
/*****


Archive image follow

****/


.hover-reveal {
	position: fixed;
	width: 500px;
	height: 300px;
	top: 0;
	left: 0;
	pointer-events: none;
	opacity: 0;
}

.hover-reveal__inner,
.hover-reveal__img {
	width: 100%;
	height: 100%;
	position: relative;
}

.hover-reveal__deco {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	/*background-color: #f6f4f4; */
	background-color: #fffef8;
}

.hover-reveal__img {
	background-size: cover;
	background-position: 50% 50%;
}



/*****
Single Work Hero feature media 
********/
.single-work-information .wrapper div .details .overview {
	width: 100%!important;
	display: block!important;
	margin-bottom: 64px;
}

.hero-feature-video video {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.single-work-information .wrapper div .details .overview a {
	/*background-color: #f6f4f4; */
background-color: #fffef8;
/*color: #5A531E; 
color: #6c00ff;*/
/*text-transform: uppercase;*/
margin-top: 64px;
}