@media only screen and (max-width: 1200px){
	#menu .inner {

		width: 100%;

	}

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


	:root {

	--gap:5px;
		--gutter:30px;
	}
	#menu ul li a {

	}
	section.text .content.three_column{
		gap:40px;
	}
	section.text .content.intro .col {
		margin-top: 40px;
		padding-left: 30%;
	}
	.accordion-header .num {
		width: 100px; /* Fixed width ensures alignment */

	}
	.content-inner {
		padding-left:100px; /* Matches the width of the number to align text with title */
		padding-right: 100px;
	}
	.nav-item{
		flex: 1 0 200px;
	}
}


@media only screen and (max-width: 768px)
{
	:root {
		--gutter:20px;
		--padding-w:20px;
		--padding-h:80px;
		--title-padding:10%;
	}
	.mobile-only{
		display: block;
	}

	.slide.landscape{
		width:75%;
	}

	.slide.portrait{
		width:45%;
	}

	section.text .content.intro h1{
		padding-right:var(--title-padding);
	}
	section.text .content.intro .col {
		padding-left: 0%;
	}
	section.text .content.three_column, section.text .content.three_column.last_col_big{
		grid-template-columns: 1fr;
		gap:20px;
	}
	section.text .content.three_column h3{
		margin:0;
	}
	.outer-holder.portrait{
		max-width:100vw;
	}

	.media.items-2 .outer-holder.landscape{

		grid-template-columns: 1fr ;
	}
	section.media.items-3 .outer-holder{

		max-width:100%;
	}
	.vimeo-trigger-btn {
		width: 55px;
		height: 35px;
	}

	#masthead {
		padding: 10px 20px;
	}


	#menu .inner{
		display: block;
	}
	#menu ul li a {
		font-size: 48px;
		line-height: 51px;
		padding: 0px 0px;
	}
	#menu #nav-logo{
		width: 95px;
		height: 28px;
	}
	#menu a.close{
		top: 12px;
		right: 12px;
	}
	#menu {
		padding-top:100px;
		padding-bottom:100px;
		align-items: center;
		position: fixed;
		height:auto;
		max-height: 100vh;
		display: block;

	}
	#menu .social-links {
		margin-top: 20px;
	}
	#menu .contact-info{
		margin-top:60px;
	}
	#menu .contact-info, #menu .contact-info a {
font-size: 13px;
	line-height: 22px;
	font-weight: 400;
	}
	#menu ul li {
		padding-top: 10px;
	}
	#menu #nav-logo{
		left:var(--padding-w);
		top: 10px;
	}
	section.carousel-holder .head{
		padding-right:var(--title-padding);
	}
	.accordion-header .num {
		width: 30px; /* Fixed width ensures alignment */

	}
	.content-inner {
		padding-left:30px; /* Matches the width of the number to align text with title */
		padding-right: 30px;
		padding-bottom:30px;
	}
	.accordion-header {
		padding: 16px 0;
	}
	section.logo-wall .wrapper{
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.click_text{
		font-size:15px;
		line-height:15px;
	}
	.items-3 .click_text{

		font-size:15px;
		line-height:15px;
	}
	.items-1 .click_text{
		font-size:25px;
		line-height:25px;
	}
	section.text .content.three_column.last_col_big .col.first{

	}
	section.text .content.three_column.last_col_big .col:nth-child(2) {
		 order: 5;
	}
	.case-study-navigation {
		gap:var(--gap);
	}
	.case-study-navigation .nav-item {
		flex: 1
	}
	.case-study-navigation .middle, .nav-text{
		display: none;
	}
	.case-study-navigation .nav-link{
		flex:0 1 50%;
	}
	.case-study-navigation .title {
		font-size: 20px;
		line-height: 25px;
	}

	.case-study-navigation .nav-link .cover {
		background: rgba(0, 0, 0, .6);
	}
	.case-study-navigation .nav-content{
		opacity: 1;
		padding: 0 20px;
	}
	#footer .wrapper{
		display: flex;
		gap: 60px;
		flex-direction: column-reverse;
	}
	#footer .site-contact-info{
		display: grid;
		grid-template-columns:2fr 1fr;
		gap:20px;

	}
	#footer h1 {
		font-size: 30px;
		line-height: 40px;
		margin-bottom: 20px;
	}
	#footer .contact-item{
		margin-bottom:0;
	}
	#footer input[type='submit']{
		font-size:20px;
		margin-top:10px;
	}
	#footer .fineprint{
		position: absolute;
		bottom:20px;
		left:20px;
	}
	#footer .fineprint span{
		display: block;
	}

	.cs-title {

		font-size: 15px;
		line-height:15px;
	}
	#header.text-only {
		padding-top: 120px;
		padding-bottom: 0px;
	}
	.team .overlay{
		padding:20px;
	}
	.member .name {
		font-size: 15px;
		line-height: 20px;
	}
	.member .title {
		font-size: 10px;
		line-height: 15px;
	}
	.team{

		grid-template-columns: 1fr 1fr ;
	}
	#menu a.close {
		width: 24px;
		height: 24px;
	}
	#masthead #logo {

		width: 95px;
		height: 28px;
	}
}


@media only screen and (min-width: 768px) and (max-height:600px)
{
	#menu #nav-logo{
		display: none;
	}

	#menu ul li a{
		line-height:60px;
		font-size:50px;
	}

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