:root {
	--black: #0c0c0c;
	--gray: #8D8D8D;
	--light-gray:#aaa;
	--white:#FFFFFF;
	--site-width: 1512px;
	--inner-width: 1040px;
	--inner-width2: 840px;
	--gap:20px;
	--gutter: 40px;
	--padding-h: 120px;
	--padding-w: 80px;
	--landscape: 16/9;
	--portrait:9/16;
}

* {
	box-sizing: border-box;
}

html {

	width: 100%;
	overflow-x: hidden;
}

body {
	width: 100%;
	overflow-x: hidden;
	margin: 0;
	padding: 0;
	min-height: 100vh;
	position: relative;
	background: #FFFFFF;

}

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

section {
	width: 100%;
	position: relative;
}

section.dark{
	background:var(--black);
	color:var(--white);
}

section.dark p, section.dark ul, section.dark ol, p a{
	color:var(--light-gray);
}


.wrapper {
	margin: 0 auto;
	width: 100%;
}


.button {
	color:var(--white);
	font-weight:500;
	letter-spacing: 0px;
	font-size: 15px;
	line-height: 20px;
	padding: 10px 22px;
	border-radius: 8px;
	min-width: 120px;
	background:var(--black);
	display: inline-block;
	text-align: center;
	cursor: pointer;
	transition:all .5s;
}



.button:hover {
	background:var(--gray);
}

.dark .button, #banner .button{
	color:var(--black);
	background:var(--white);
}
.dark .button:hover, #banner .button:hover{
	background:var(--gray);
}
a{
	color:var(--black);
}

p a{
	text-decoration: underline;
}

.padding-top{
	padding-top:var(--padding-h);
}

.padding-bottom{
	padding-bottom:var(--padding-h);
}

.mobile-only{
	display: none;
}

.arrowdown{
	display: block;
	width:100px;
	height:100px;
	background:url(../images/arrowdown.svg) center center no-repeat;
	background-size:15px 34px;
	position: absolute;
	bottom: 20px;
	z-index: 3;
	transition:all .3s;
	cursor:pointer;
}

.arrowdown:hover{
	opacity: .7;
	bottom:15px;
}

/* -------------------------------- FOOTER ---------------------------------- */

#footer{
	padding:calc(2*(var(--padding-h))) 0;
	background:var(--black);
	color:var(--gray);
	position: relative;
}

#footer .wrapper{
	max-width:var(--site-width);
	padding-left:var(--padding-w);
	padding-right:var(--padding-w);
	display: grid;
	grid-template-columns: 3fr 4fr;
}

#footer .contact-item{
	margin-bottom:40px;
}

#footer a{
	color:var(--white);
	display: block;
}
#footer h1{
	color:var(--white);
	font-size:55px;
	line-height:60px;
	margin-bottom:60px;
}

#footer input[type='text'], #footer input[type='email'], #footer textarea{
	background:none;
	border:none;
	border-bottom:1px solid var(--gray);
	border-radius:0px;
	padding-left:0px;
	color:var(--gray);
}
input:focus,
textarea:focus,
#footer input[type='submit']:focus {
	outline: none !important;
	box-shadow: none !important;

}
#footer input[type='submit']:focus {
	outline: none !important;
	border:none !important;
	box-shadow: none !important;
}
#footer input[type='text']:focus, #footer input[type='email']:focus,
#footer textarea:focus{
	border-bottom:1px solid var(--white);
}
/* Keyboard focus ring (mouse clicks stay outline-free) */
#footer input[type='submit']:focus-visible {
	outline: 2px solid var(--white) !important;
	outline-offset: 3px;
}
#footer input[type='submit']{
	background:var(--white);
	color:var(--black);
	border:none;
	border-radius:8px;
	padding:.4em 1.2em;
	font-size:30px;
	margin-top:20px;
	transition:all .3s;
}
#footer textarea{
	height:50px;
	min-height:unset;
}
#footer input[type='submit']:hover{
	background:var(--light-gray);
	color:var(--black);
}
#footer .gform-theme--framework .gform_validation_errors{
	display: none;
}

/* Light text for the Gravity Forms theme on the dark footer.
   The extra classes beat the inline styles Gravity Forms prints per form. */
#footer .site-form .gform_wrapper.gform-theme--framework {
	--gf-ctrl-color: var(--white);
	--gf-ctrl-color-hover: var(--white);
	--gf-ctrl-color-focus: var(--white);
	--gf-ctrl-placeholder-color: var(--light-gray);
	--gf-ctrl-placeholder-opacity: 1;
	--gf-ctrl-label-color-primary: var(--white);
	--gf-ctrl-label-color-secondary: var(--light-gray);
	--gf-ctrl-label-color-tertiary: var(--light-gray);
	--gf-ctrl-label-color-quaternary: var(--light-gray);
	--gf-ctrl-label-color-req: var(--light-gray);
	--gf-ctrl-desc-color: var(--light-gray);
	--gf-ctrl-btn-bg-color-primary: var(--white);
	--gf-ctrl-btn-bg-color-hover-primary: var(--light-gray);
	--gf-ctrl-btn-bg-color-focus-primary: var(--light-gray);
	--gf-ctrl-btn-color-primary: var(--black);
	--gf-ctrl-btn-color-hover-primary: var(--black);
	--gf-ctrl-btn-color-focus-primary: var(--black);
	--gf-ctrl-btn-radius: 8px;
	color: var(--light-gray);
}
#footer input[type='text'], #footer input[type='email'], #footer textarea{
	color:var(--white);
}
#footer input::placeholder, #footer textarea::placeholder{
	color:var(--light-gray);
	opacity:1;
}

#footer .fineprint span{
	margin-right:10px;
	display: inline;
}
#footer .fineprint{
	position: absolute;
	bottom:10px;
	right:10px;
	font-size:9px;
	letter-spacing: .2px;
	font-weight:300;
}
#footer .fineprint a{
	display: inline;
	color:var(--gray);
}
/* ---------------------------------- MASTHEAD ------------------------------------------- */

#masthead {
	width: 100%;
	top: 0;
	left: 0;
	position: fixed;
	z-index: 10;
	padding:20px ;
	box-sizing:border-box;
	display: flex;
	align-items: center;
	justify-content: space-between;
	/* Animate transform, not top, so hiding the header doesn't trigger layout */
	transition: transform .5s ease, opacity .5s ease, background-color .5s ease;
}
#masthead.scrolleddown {
	opacity: 0;
	transform: translateY(-100px);
}


#masthead.scrolledup , #masthead.color-dark {
	background: rgba(255, 255, 255, .7);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px); /* Crucial for Safari support */
	top: 0px !important;
	transform: none;
	opacity: 1;
}



#masthead #logo {
	width: 125px;
	height: 36px;
	display: block;
	background:url(../images/logo-white.svg) no-repeat;
	background-size: contain;
	transition: all .5s;

}


#masthead.scrolledup #logo, #masthead.color-dark #logo{
	background:url(../images/logo.svg) no-repeat;
	background-size: contain;
}

#masthead.scrolled #logo{

	width: 95px;
	height: 28px;
}
#main-menu {
	float: right;
}

#main-menu ul#menu-main-1 {
	margin: 0;
	padding: 0;
	display: flex;
}

#main-menu ul li {
	list-style: none;
	display: inline-block;
	margin: 0;
	padding: 0;
}

#main-menu ul li:hover a {
	color: #fff;
	background: var(--blue);
}

#main-menu ul li a {
	font-size: 15px;
	font-weight: 500;
	color: var(--blue);
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 0 30px;
	text-transform: uppercase;
	height: 80px;
	transition: all .5s;
}

#main-menu ul li a:hover {
	background: var(--blue);
	color: #fff;
}


.scrolled #main-menu ul li a {
	font-size: 12px;
	height: 50px;
}







#masthead #menu-btn {
	cursor: pointer;

	width: 30px;
	display: block;
	transition: all .5s;
	margin-left: auto;
	mix-blend-mode: difference;
	mix-blend-mode: normal;
	background-color: transparent;
}

#masthead #menu-btn .bar {
	height: 2px;
	background: var(--white);
	margin: 3px 0;
	float: right;
}
#masthead.scrolledup #menu-btn .bar, #masthead.color-dark   #menu-btn .bar{

background: var(--black);
}
#masthead #menu-btn .bar1 {
	width: 100%;
}

#masthead #menu-btn .bar2 {
	width: 100%;
}

#masthead #menu-btn .bar3 {
	width: 100%;
}

#masthead.scrolled #menu-btn {
	width: 30px;
}


/* -------------------------------- MENU ------------------------------------------- */

#menu {
	position: fixed;
	top: 0;
	left:0;
	z-index: 9999;
	overflow: auto;
	height: 100%;
	width:100%;
	padding:0 var(--padding-w);
	color:var(--white);
	display: flex;
	align-items: center;
}

#menu #nav-logo{
	position: absolute;
	top:20px;
	left:20px;
	display: block;
	width:125px;
	height:36px;
	background:url(../images/logo-white.svg) no-repeat center center;
	background-size:contain;
}
#menu .social-links{
	margin-top:40px;
}
#menu .contact-info , #menu .contact-info a{
	color:var(--white);
	font-size:18px;
	line-height:31px;
	display: block;
	font-weight:500;
}
 #menu .contact-info a:hover{
	 color:var(--light-gray);
 }
#menu .inner{

	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	width: 80%;
	margin: 0 auto;
}

#menu ul {
	list-style: none;
	padding: 0;
	margin: 0;
	opacity: 0;
	transition: opacity 1s .5s;
}

.menu-opened #menu ul {
	opacity: 1;
}




#menu ul li a:hover {
	color: var(--primary);
}



#menu a.close {
	width: 32px;
	height: 32px;
	background-size: 80%;
	display: block;
	position: absolute;
	right: 20px;
	top: 20px;
	cursor: pointer;
}

#menu a.close:hover {

	background-size: 100%;
}



body.menu-opened {

	overflow: hidden;
}

body.menu-opened #menu-overlay {

	visibility: visible;
	opacity: 1;
}



.sub-menu-toggle {
	display: none;
}



#menu ul {
	list-style: none;
	padding: 0;
	margin: 0;
	opacity: 0;
}

.menu-opened #menu ul {
	opacity: 1;
}

#menu ul li a {
	color: #6E6E6E;
	font-size: 75px;
	line-height: 80px;
	font-weight: 600;
	display: block;
}

#menu ul li {
	padding-top:30px;
}






#menu a.close::before,
#menu a.close::after {
	content: '';
	position: absolute;
	width: 100%;
	height: 2px; /* Thickness of the lines */
	background-color: #ffffff;
	top: 50%; /* Center vertically */
	left: 0;
	transition: all 0.2s ease; /* Optional hover animation */
}

#menu a.close::before {
	transform: rotate(45deg);
}

#menu a.close::after {
	transform: rotate(-45deg);
}

/* Optional Hover Effect */
#menu a.close:hover::before,
#menu a.close:hover::after {
	background-color: #cccccc; /* Dim slightly on hover */
}



#menu-overlay {
	position: fixed;
	z-index: 99;
	background:var(--black);
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	opacity: 0;
	visibility: hidden;
}

body.menu-opened {
	min-height: 100vh;
	overflow: hidden;
}

body.menu-opened #menu-overlay {

	visibility: visible;
	opacity: 1;
}

body.menu-opened #menu {
	top: 0;
	visibility: visible;
}

/* -------------------------------- TESTING ---------------------------------- */



/* -------------------------------- MENU ---------------------------------- */

body #menu-overlay {
	visibility: hidden;
	opacity: 0;
}


body #menu {
	top: -100%;
	visibility: hidden;

}

#menu ul{
	opacity: 1;
}
/* -------------------------------- MEDIA ---------------------------------- */
section.media.gap-none{
	padding:0;
}
section.media.gap-both{
	padding:var(--gap) 0;
}
section.media.gap-top{
	padding:var(--gap) 0 0 0;
}
section.media.gap-bottom{
	padding:0 0 var(--gap) 0;
}
section.media.items-3, section.media.items-2{
	//padding:var(--padding-h) 0;
}
.holder{
	overflow: hidden;
	position: relative;
}

iframe, .vimeo-loader, .image, .poster{
	width:100%;
	height:100%;
	top:0;
	border: none;
	left:0;
	position: absolute;
	background:#000;
}

.vimeo-loader{
	display: flex;
	align-items: center;
	justify-content: center;

}


.vimeo-trigger-btn{

  width: 65px;
  height: 45px;
  border-radius: 6px;
  background-color: rgba(30, 30, 30, 0.85); /* Dark, semi-transparent background */
  border: none;
  cursor: pointer;
  transition: background-color 0.2s ease;
  display: flex;
  justify-content: center;
  align-items: center;
	z-index: 2;
	position: relative;
}

.vimeo-trigger-btn:hover {
  background-color: rgba(0, 0, 0, 1);
}

.vimeo-trigger-btn::after {
  content: '';
  display: block;
  width: 0;
  height: 0;
  border-top: 9px solid transparent;
  border-bottom: 9px solid transparent;
  border-left: 15px solid white;
  margin-left: 4px;
}

.holder.portrait{
	aspect-ratio: var(--portrait);
}

.holder.landscape{
	aspect-ratio: var(--landscape);
}

.media.items-2 .outer-holder{
	width:100%;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap:var(--gap);
	margin: 0 auto;
}

.outer-holder.portrait{
	max-width:50vw;
}
.outer-holder.portrait.full_width{
	max-width:100vw;
}
.outer-holder.landscape{
}

.media.items-2 .outer-holder.portrait .holder{
	aspect-ratio: var(--portrait);
	position: relative;
}


.media.items-2 .outer-holder.landscape .holder{
	aspect-ratio: var(--landscape);
	position: relative;
}

.media.items-2 .outer-holder.landscape_portrait{
	grid-template-columns: 3.16fr 1fr;
}

.media.items-2 .outer-holder.portrait_landscape{
	grid-template-columns: 1fr 3.16fr;
}
.outer-holder.landscape_portrait .holder:nth-of-type(1){
	aspect-ratio: var(--landscape);
	position: relative;
}
.outer-holder.landscape_portrait .holder:nth-of-type(2){
	aspect-ratio: var(--portrait);
	position: relative;
}

.outer-holder.portrait_landscape .holder:nth-of-type(1){
	aspect-ratio: var(--portrait);
	position: relative;
}
.outer-holder.portrait_landscape .holder:nth-of-type(2){
	aspect-ratio: var(--landscape);
	position: relative;
}


section.media.items-3 .outer-holder{
	width:100%;
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap:var(--gap);
	margin: 0 auto;
	max-width:70vw;
}
section.media.items-3 .outer-holder.full_width{
	max-width:100vw;
}

.click_layer{
	width:100%;
	height:100%;
	top:0;
	border: none;
	display: flex;
	align-items: center;
	justify-content: center;
	left:0;
	position: absolute;
	background: rgba(0, 0, 0, 0);
	z-index: 1;
	transition:background .5s;
}

.click_layer:hover{

	background: rgba(0, 0, 0, .7);
}
.click_layer:hover .click_text{
	opacity:1;
}
.click_text{
	color:var(--white);
	font-size:40px;
	line-height:40px;
	font-weight:500;
	opacity:0;
	transition:all .5s;
}
.items-3 .click_text{
	font-size:30px;
	line-height:30px;
}
.items-1 .click_text{
	font-size:55px;
	line-height:55px;
}
/* -------------------------------- TEXT ---------------------------------- */

section.text.row-1{
	padding-top:calc(1.3*var(--padding-h));
}

section.text .content{
	width:100%;
	margin:0 auto;
}

section.text .content.single_column{
	padding-left:20px;
	padding-right:20px;
	max-width:var(--inner-width2);
}

section.text .content.single_column.wide_layout{
	padding-left:var(--padding-w);
	padding-right:var(--padding-w);
	max-width:var(--site-width);
}


section.text .content.three_column {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap:80px;
	padding-left: var(--padding-w);
	padding-right: var(--padding-w);
	max-width: var(--site-width);
}
section.text .content.intro{
	padding-left: var(--padding-w);
	padding-right: var(--padding-w);
	max-width: var(--site-width);
}
section.text .content.intro h5{
	color:var(--gray);
}
section.text .content.intro h1{
	padding-right:25%;
}
section.text .content.intro .col{
	margin-top:60px;
	padding-left:50%;
}
section.text .content.intro .buttons{
	margin-top:40px;
}


section.text .content.three_column.last_col_big{

	grid-template-columns: 1fr 1fr 4fr;
}

/* -------------------------------- CAROUSEL ---------------------------------- */


section.carousel-holder{
}
section.carousel-holder .head{
	max-width: var(--site-width);
	padding-right:20%;
	padding-left: var(--padding-w);
}

.slider-controls{
	margin:40px 0 40px 0;
	display: flex;
	gap:30px;
}
.prev-btn:hover, .next-btn:hover{
	opacity: .3;

}

/* Container styles to set the size of the click area */
.prev-btn,
.next-btn {
	transition:all .3s;
	position: relative;
	display: inline-block;
	width: 40px; /* Controls the length of the arrow shaft */
	height: 30px; /* Controls the height of the clickable area */
	cursor: pointer;
}

/* The Shaft (The long horizontal line) */
.prev-btn::before,
.next-btn::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 0;
	width: 100%;
	height: 2px; /* Thickness of the lines */
	background-color: var(--black);
	margin-top: -1px; /* Half of height to center perfectly */
}

/* The Head (The angled part) */
.prev-btn::after,
.next-btn::after {
	content: '';
	position: absolute;
	top: 50%;
	width: 13px; /* Size of the arrow head */
	height: 13px;
	border-style: solid;
	border-color: #000;
	box-sizing: border-box;
}

.dark .prev-btn::before,
.dark .next-btn::before {
	background-color:var(--light-gray);
}
.dark .prev-btn::after,
.dark .next-btn::after {
	border-color: var(--light-gray);
}
/* Specifics for the Left Arrow */
.prev-btn::after {
	left: 0;
	border-width: 2px 0 0 2px; /* Top and Left borders */
	transform: translateY(-50%) rotate(-45deg);
}

/* Specifics for the Right Arrow */
.next-btn::after {
	right: 0;
	border-width: 2px 2px 0 0; /* Top and Right borders */
	transform: translateY(-50%) rotate(45deg);
}
.slide{
	margin-right:var(--gap);
}
.slide .media{
	width:100%;
	background:var(--black);
}
.slide.landscape{
	width:35%;
}
.slide.landscape .media{
	aspect-ratio:var(--landscape);
}
.slide.portrait{
	width:15%;
}

.slide.portrait .media{
	aspect-ratio:var(--portrait);
}

.slide .holder{

	width: 100%;
	height: 100%;
}

.dark .caption .writeup{
	color:var(--light-gray);
}

.slide iframe.bg_video{
	pointer-events: none;
}


/* -------------------------------- ACCORDION ---------------------------------- */


/* Container */
section.accordion .wrapper {
	width: 100%;
	padding:0 var(--padding-w);
	max-width: var(--site-width);
	margin: 0 auto;
}

/* Item Wrapper */
.accordion-item {
	border-bottom: 1px solid #e0e0e0;
	overflow: hidden;
}

.dark .accordion-item{
	border-bottom:1px solid #444;
}

.dark .icon-toggle{
	background-color:#8c8c8c;
}

.dark .accordion-item.active .icon-toggle{
	background-color:#444;
}

/* Header (Clickable Area) */
.accordion-header {
	display: flex;
	align-items: center;
	padding: 20px 0;
	cursor: pointer;
	position: relative;
}

/* Number Styling */
.accordion-header .num {
	width: 200px; /* Fixed width ensures alignment */
	flex-shrink: 0;
	margin-bottom:0;
}

/* Title Styling */
.accordion-header h5 {
	margin: 0;
	flex-grow: 1;
}

/* Icon Container (Circle) */
.icon-toggle {
	width: 32px;
	height: 32px;
	background-color: #f0f0f0; /* Light grey circle background */
	border-radius: 50%;
	position: relative;
	transition: background-color 0.3s ease;
}

/* Icon Lines (Plus/Minus) */
.icon-toggle::before,
.icon-toggle::after {
	content: '';
	position: absolute;
	background-color: #000;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	transition: transform 0.3s ease;
}

/* Horizontal Line */
.icon-toggle::before {
	width: 12px;
	height: 2px;
}

/* Vertical Line */
.icon-toggle::after {
	width: 2px;
	height: 12px;
}

/* Active State Styles */
.accordion-item.active .icon-toggle {
	background-color: var(--black); /* Black circle when active */
}

.accordion-item.active .icon-toggle::before {
	background-color: var(--white); /* White line when active */
}

.accordion-item.active .icon-toggle::after {
	transform: translate(-50%, -50%) rotate(90deg); /* Rotate into horizontal to make minus */
	background-color: var(--white);
	opacity: 0; /* Or just hide the vertical line to make a minus */
}

/* Content Area */
.accordion-content {
	display: none; /* Hidden by default */
}

.content-inner {
	padding-bottom: 40px;
	padding-left:200px; /* Matches the width of the number to align text with title */
	padding-right: 200px;
}

.content-inner p {
	max-width: 600px;
}

.content-inner .button{
	margin-top:20px;
}


/* ------------------------------ LOGO WALL ------------------------------------------- */
section.logo-wall{
	max-width:var(--site-width);
	padding:var(--padding-h) var(--padding-w);
	margin: 0 auto;

}
section.logo-wall .wrapper{
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	row-gap: var(--gap);
	column-gap: var(--gap);
	align-items: center;
	justify-items: center;
	background:;
}
/* Fixed-size logo box so the grid never changes height */
.logo-wall__item {

	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: auto;
	background: #f6f6f6;
	aspect-ratio: 1.7;
}


/* Logo scales *inside* that box */
.logo-wall__item img {
	height: 30%;
	width:auto;
	display: block;
	opacity: 1;
	transition: opacity 1s ease;
}

.logo-wall__item img.logo-fade-out {
	opacity: 0;
}

.logo-wall__item img.logo-fade-in {
	opacity: 1;
}

.logo-wall__item img.logo-squareish{
	height:43%;
	width:auto;
}
.logo-wall__item img.logo-wide{
	width:37%;
	height:auto;
}
.logo-wall__item img.x-wide{
	width:42%;
	height:auto;
}


/* -------------------------------- CASE STUDY ---------------------------------- */

#banner{
	display: flex;
	align-items: flex-end;
	padding:var(--padding-w);
	min-height:100vh;
	width:100vw;
}

#banner.centered{
	align-items: center;
	justify-content:center;
}

#banner.centered .text{

	padding: 0 20px;
}

#banner.centered .button{
	margin-top:30px;
}

#banner .cover{
	opacity: .6;
	width:100%;
	height:100%;
	top:0;
	left:0;
	z-index: 1;
	background:var(--black);
	position: absolute;
}

#banner .text{
	z-index: 2;
	color:var(--white);
	position: relative;

}

#banner.centered .text{
	text-align:center;
}

#banner iframe{
	position: absolute;
	top: 50%;
	left: 50%;
	width: 177.77vh; /* 16:9 aspect ratio width relative to viewport height */
	height: 100%;
	min-width: 100%;
	min-height: 56.25vw; /* 16:9 aspect ratio height relative to viewport width */
	transform: translate(-50%, -50%);
	pointer-events: none; /* Prevents interaction if it's just a background */
}

section.text a.service{
	color:var(--light-gray);
	transition:all .3s;
}

section.text a.service h6{
	margin-bottom:10px;
}
section.text a.service:hover{
	color:var(--black);
}

.case-study-navigation{
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding:var(--padding-h) 0;
}
.case-study-navigation .nav-thumb{
	position: absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
}

.case-study-navigation .nav-link{
	display: flex;
	align-items: center;
	gap:20px;
}

.case-study-navigation .nav-item{
	display: block;
	flex: 1 0 300px;
	position: relative;
	overflow:hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: var(--portrait);
}


.case-study-navigation .nav-content{
	position: relative;
	z-index: 2;
	text-align:center;
	color:var(--white);
	opacity: 0;
	transition:all 1s;
}

.case-study-navigation h2, .case-study-navigation h1{
	margin:0;
}

.case-study-navigation .label{
	color:var(--gray);
}
.case-study-navigation  .title{
	font-weight:500;
	font-size: 25px;
	line-height:35px;
}

.case-study-navigation  .cover{
	position: absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	transition:all .5s;
	background:rgba(0,0,0,0);
}
.case-study-navigation .nav-link:hover .nav-content{
	opacity: 1;
}
.case-study-navigation .nav-link:hover .cover{

	background:rgba(0,0,0,.6);
}
.case-study-navigation .middle a{

	transition:all .3s;
}
.case-study-navigation .middle a:hover{
	color:var(--gray);
}
.all-work{
	text-align:center;
	padding:var(--padding-h) 0;
}



/* -------------------------------- TEXT ONLY HEADER ---------------------------------- */

#header.text-only{
	padding-top:140px;
	padding-bottom:40px;
}
#header.text-only .wrapper{
	padding-left:var(--padding-w);
	padding-right:var(--padding-w);
	max-width:var(--site-width);
}
/* -------------------------------- CASE STUDIES MASONRY ---------------------------------- */




/* --- Container & Responive Columns --- */
.cs-masonry-grid {
	/* "width: auto" allows the negative margins to expand the box */
	width: auto;
	/* Pull the container 10px to the left and right to cancel out the item padding */
	margin-left: -10px;
	margin-right: -10px;
	padding-bottom:var(--padding-h);
}

/* Default: Mobile (2 columns) - implied < 768px */
.cs-grid-sizer,
.cs-grid-item {
	width: 50%; /* 2 columns */
	padding: calc(var(--gap)/2); /* Gutter spacing */
	box-sizing: border-box;
}

/* Desktop (3 columns) - >= 768px */
@media (min-width: 768px) {
	.cs-grid-sizer,
	.cs-grid-item {
		width: 33.333%;
	}
}

/* Large Desktop (4 columns) - >= 1200px */
@media (min-width: 1200px) {
	.cs-grid-sizer,
	.cs-grid-item {
		width: 33.333%;
	}
}

/* Extra Wide Desktop (5 columns) - >= 1600px */
@media (min-width: 1600px) {
	.cs-grid-sizer,
	.cs-grid-item {
		width: 25%;
	}
}

/* --- Item Structure & Aspect Ratios --- */
.cs-item-link {
	display: block;
	position: relative;
	width: 100%;
	height: 100%;
	overflow: hidden;
}

/* The "padding-hack" for responsive aspect ratios.
   The percentage is based on width.
   100% = square. 150% = 2:3 portrait ratio.
*/
.cs-media-wrapper {
	position: relative;
	width: 100%;
	height: 0;
	/* Default base portrait ratio */
	padding-bottom: 133%; /* Approx 3:4 ratio */
}

/* Randomized Variations (slightly different portrait heights) */
.ratio-var-1 .cs-media-wrapper { padding-bottom: 133%; }
.ratio-var-2 .cs-media-wrapper { padding-bottom: 140%; }
.ratio-var-3 .cs-media-wrapper { padding-bottom: 150%; }
.ratio-var-4 .cs-media-wrapper { padding-bottom: 120%; }
.ratio-var-5 .cs-media-wrapper { padding-bottom: 125%; }
.ratio-var-6 .cs-media-wrapper { padding-bottom: 145%; }


/* --- Media Styling (Video & Image) --- */
.cs-bg-image,
.vimeo-container,
.vimeo-container iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.cs-bg-image {
	background-size: cover;
	background-position: center;
	transition: transform 0.5s ease;
}

.vimeo-container {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	overflow: hidden; /* Crops the excess video */
	pointer-events: none; /* Prevents clicking the iframe */
}

.vimeo-container iframe {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%); /* Centers the video */

	/* Force the video to match the container's width */
	width: 100%;

	/* Calculate height based on 9:16 ratio (16 / 9 = 1.7778) */
	height: 177.78vw; /* Fallback for older browsers */
	height: auto;
	aspect-ratio: 9 / 16;

	/* Ensure it never shrinks smaller than the container height */
	min-height: 100%;
}
/* Optional: Slight zoom effect on base image on hover */
.cs-item-link:hover .cs-bg-image {
	transform: scale(1.05);
}


/* --- Hover Overlay --- */
.cs-overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.6); /* Black transparency */
	display: flex;
	align-items: flex-end; /* Align text to bottom like example */
	padding: 40px;
	box-sizing: border-box;
	opacity: 0;
	transition: opacity 0.3s ease;
	z-index: 2;
}

.cs-item-link:hover .cs-overlay {
	opacity: 1;
}

.cs-title {
	color: #fff;
	margin: 0;
	font-size: 35px;
	line-height:35px;
	/* Optional: Add dotted underline like example image */
	display: inline-block;
}



/* -------------------------------- PHOTO GALLERY ---------------------------------- */


/* --- Container --- */
.photo-gallery-container {
	max-width: 1400px;
	margin: 0 auto;
	padding: 40px 20px;
}

/* --- Filter Buttons --- */
.gallery-filters {
	text-align: center;
	margin-bottom: 50px;
}

.filter-btn {
	background: none;
	border: none;
	font-size: 16px;
	margin: 0 15px;
	padding-bottom: 5px;
	cursor: pointer;
	opacity: 0.5;
	transition: all 0.3s ease;
	font-family: inherit;
	text-transform: uppercase;
	letter-spacing: 1px;
}

.filter-btn.active,
.filter-btn:hover {
	opacity: 1;
	border-bottom: 2px solid #000;
}

/* --- Masonry Grid --- */
.iso-grid {
	margin-left: -10px; /* Offset padding */
	margin-right: -10px;
}
.iso-grid:after {
	content: '';
	display: block;
	clear: both;
}

/* 3 Columns Desktop */
.grid-sizer, .grid-item {
	width: 33.333%;
	padding: calc( var(--gap) / 2 );
	float: left;
	box-sizing: border-box;
}

.grid-item a {
	display: block;
	position: relative;
	overflow: hidden;
}

/* Hidden until gallery-init.js reveals it */
.iso-grid .grid-item > a {
	opacity: 0;
	visibility: hidden;
}

.grid-item img {
	display: block;
	width: 100%;
	height: auto;
	transition: transform 0.5s ease;
	backface-visibility: hidden;
}

/* --- Hover Overlay --- */
.overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.4);
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	transition: opacity 0.3s ease;
}

.view-btn {
	color: #fff;
	border: 1px solid #fff;
	padding: 10px 20px;
	text-transform: uppercase;
	letter-spacing: 1px;
	font-size: 14px;
}

.grid-item:hover img {
	transform: scale(1.05);
}

.grid-item:hover .overlay {
	opacity: 1;
}

/* --- Responsive --- */
@media (max-width: 1024px) {
	.grid-sizer, .grid-item { width: 50%; }
}

@media (max-width: 600px) {
	.filter-btn { margin: 0 8px; font-size: 14px; }
}

/* --- Load More Button --- */
.load-more-wrap {
	text-align: center;
	margin-top: 60px;
}

#load-more-photos {
	padding: 15px 40px;
	background: #000;
	color: #fff;
	border: none;
	cursor: pointer;
	font-size: 14px;
	text-transform: uppercase;
	letter-spacing: 2px;
	transition: background 0.3s ease;
}

#load-more-photos:hover {
	background: #333;
}

/* --- Play Button Styling --- */
.play-btn {
	display: block;
	width: 60px;
	height: 60px;
	background: rgba(255, 255, 255, 0.2);
	border: 2px solid #fff;
	border-radius: 50%;
	position: relative;
	transition: all 0.3s ease;
	backdrop-filter: blur(2px);
}

.play-btn:before {
	content: '';
	position: absolute;
	top: 50%;
	left: 55%; /* Slight offset to visually center the triangle */
	transform: translate(-50%, -50%);
	width: 0;
	height: 0;
	border-top: 10px solid transparent;
	border-bottom: 10px solid transparent;
	border-left: 18px solid #fff; /* The Triangle */
}

/* Hover Effects */
.grid-item:hover .play-btn {
	background: #fff;
	transform: scale(1.1);
}

.grid-item:hover .play-btn:before {
	border-left-color: #000; /* Triangle turns black on hover */
}

/* Keep the existing overlay styles */
.overlay {
	/* ... ensure opacity, transition, etc match previous code ... */
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Target the slide that has our injected class */
.gslide.is-portrait-slide .gvideo-wrapper iframe{
	width:33.333%;
	margin-left: 33.333%;
}

@media (min-width:769px){
	.gslide-media{
		max-width:70% !important;
	}
}



/* Mobile: Let it fill the width */
@media (max-width: 768px) {
	.gslide.is-portrait-slide .gvideo-wrapper {
		max-width: 100%;
	}
}


/* -------------------------------- TEAM ---------------------------------- */

.team{
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap:var(--gap);
	max-width:var(--site-width);
	padding-left:var(--padding-w);
	padding-right:var(--padding-w);
	margin:0 auto;
	padding-bottom:var(--padding-h);
}

.member{
	position: relative;
	aspect-ratio: 3/4;
}

.member .overlay{

	background: rgba(0, 0, 0, 0.6);
	align-items: flex-end;
	justify-content: flex-start;
	padding:40px;
}

.member:hover .overlay{
	opacity: 1;
}
.team .overlay{

	z-index: 3;

}

.member .name{
	color:var(--white);
	font-size:28px;
	line-height:35px;
	font-weight:500;
}

.member .title{
	color:var(--light-gray);
	font-size:15px;
	line-height:25px;
	font-weight:500;
}


/* -------------------------------- CONTACT ---------------------------------- */

.page-template-0_contact #footer {

	min-height: 100vh;
}