@charset "UTF-8";



/*----------------- iPhone Landscape (A - Z) (Lock Off) ----------------- */


@media only screen  and (min-device-height: 300px)  and (max-device-height: 500px)  and (orientation: landscape) { *{ display: none; } }


/*----------------- iPhone - All Sizes Portrait (A - Z) -------------------- */

@media only screen 
and (min-device-width: 300px) 
and (max-device-width: 500px) 
and (orientation: portrait) { 

	
  


body { font-size: .85em; }



	
	
	
	
	


footer { position: relative; min-height: 100dvh; }
	
footer p {  margin-bottom: 0; }
	
footer picture { filter: brightness(0.3333); }
	
footer .socials { display: flex; }

footer section {  display: flex; grid-gap: 20px; width: calc(100% - 60px); }
	
footer section ul {    flex-direction: column;		}
	
footer section ul li { margin-bottom: 10px; }
	
footer section ul li ul { padding: 0px; margin-top: 0px; }
	
footer section .logo { width: 100px; height: auto;  }

footer section a i { font-size: 1.8em; margin-left: 0; }

footer section .line {  grid-column: span 5; background-color: grey; height: 1px; display: none; }

footer section .legals { display: flex;  flex-direction: column;}	
	
footer section .legals p {    margin-left: 0px;  margin-bottom: 5px; }	
	
	

	
	
	
	
form { grid-template-columns: 1fr;  gap: 10px; }
	
form label {  font-size: 1.5em; }
	
form input { font-size: 1.5em;  padding: 10px 5px;  width: calc(100% - 14px);     margin-bottom: 15px; }	
	
form select { font-size: 1.5em; padding: 10px 5px; margin-bottom: 15px; }
	
	
	
	
h1 { font-size: 2.6em; }

h2 { font-size: 2.4em;  }

h3 { font-size: 2.2em; line-height: 0.9em;  word-break: break-word; }	
	
h4 { font-size: 2.0em;  }	

h5 { font-size: 1.8em;  }	

	
p { font-size: 1.5em; }

	
	
main { min-height: 100dvh;  margin-bottom: 0; background-color: white; }	
	
	
	
nav { left: 0px; top: 0px; height: 110px; width: 100%;   }

nav picture { width: 50px; height: 50px; top: 30px; left: 30px;  position: absolute; }

nav picture img {  width: 50px; }	

	

	
	

section { min-height: auto; }



	
	
	
	
	
	
	
	
	
	
.bento { position: relative; display: flex;  margin-bottom: 50px; transform: translateY(0px);flex-direction: column; }

.bento .project {  height: 75vh; }

.bento .rs2 .project { height: 75vh; }

.bento a:nth-of-type(2) .project { position: relative; height: 75vh /* Stella */  }


.bento .project .pdc .deets { transform: translateY(0px); }	  

.bento .project .pdc h5 { opacity: 1; }	  

.bento .project .pdc p { opacity: 1; }	

.bento .project .pdc .logo img { width: 75px; }



	
	


.content {  width: calc(100% - 60px); padding:30px 0px; }

.content.max { height: auto; }	
	
.content.xwide { padding: 30px 0px; }
	
.content.xwide.nb { padding:0px; /* note - have images have no padding and other content have 30/0px padding */ }

.content.widestrict { height: auto; }
	
.content.nobm {  padding-top: 0px;}	
	
	
	
	
.counters { display: flex;  align-items: center; justify-content: center; flex-direction: column; padding: 30px 0px; gap: 30px; }
	
.counters .counter { padding: 0px 0px; }
	
	
	
	
.cursordy { height: 80px; width: 80px; display: none; }

.cursordy::after  { font-size: 1.5em; }



.counters .counter h3 { font-size: 5.2em; }	  




.collapsibles .collapsible .header h5 .number { display: none;}







.carousel .card {  min-width: calc(100vw - 60px); padding:30px; }	

.carousel .card:first-of-type {  min-width: fit-content; }	 
	
.carousel .card:last-of-type {   min-width: calc(100vw - 100px); }

.carousel .card .mastercard { width: min-content; margin-right: 30px; }	 

.carousel .mastercard .details {  width: min-content; }

.carousel .card .card-details { transform: translateY(0px); }	  

.carousel .card .card-details .cta { filter: opacity(1); }	  

	
	
.contacts {    grid-template-columns: 1fr;  gap: 30px; }

	
	
.flexible {  padding-top: 0px !important; }



.full-bleed { min-height:auto; height: auto; }

.full-bleed-bg { position: relative; min-height:auto; height: auto; }	  

.full-bleed-bg img {   height: auto; transform: scale(1.05); }	  
	
.full-bleed.duo { grid-template-columns: 1fr; }

.full-bleed.trio { grid-template-columns: 1fr; }

	
	


.grid { margin-bottom: 0px; gap: 0px; }

.grid.two {grid-template-columns: 1fr;   grid-column-gap: 0px;  margin-bottom: 0px; }

.grid.four { grid-template-columns: 1fr;   grid-column-gap: 0px;  margin-bottom: 0px; }
	
	
	
	
	
	
	
.hero { height: 100dvh; }
	
.hero.video video { height: 100dvh; }
	
.hero .full-bleed { min-height: 100dvh; }

.hero .full-bleed-bg { min-height: 100dvh; }	  

.hero .full-bleed-bg img {   height: 100dvh; transform: scale(1); /* remove gsap transition for mobile and tablets */ }	    

	
	
	
.hero-work { grid-template-columns: 1fr; gap: 30px; }
	
.hero-work .logo { width: 100px; height: 100px; }	
		
.hero-work .details h2 { font-size: 2.0em; }

.hero-work .details h2 h2 header { font-size: 1.2em; }

	
	
.hero-work .details .services { position: relative; display: inline-block; margin-bottom: 15px; }

.hero-work .details .services p { padding: 5px 10px; margin-right: 10px; margin-bottom: 10px; opacity: 1; float: left; }
	
	
	
	
	
.marquee span { margin-right: 44px;  font-size: 6.0em; line-height: 0.67em; }
	
	
.maxheight { min-height: auto; height: auto; }




.maino { display: flex; flex-direction: column-reverse; }
	
.maino.right { display: flex; flex-direction: column; }
	
.maino .details { margin: 30px 30px 90px 30px; }	  
	
.maino.timeline .details { margin: 0px;  margin-top: 30px;  margin-bottom: 30px; }	  

.maino.right .details {  margin: 30px 30px 90px 30px;  }	
	
.maino.right.timeline .details { margin: 0px;  margin-top: 30px;  margin-bottom: 30px; }	    

.maino .image img { height: auto; }
	
	
	
	
	

.mnv { /* maino video */ position: relative; display: flex; flex-direction: column-reverse; }
	
.mnv .video { height: fit-content; }
	
.mnv .video video {   position: relative;  height: fit-content; object-fit: inherit;left: inherit; top: inherit; transform: inherit; }
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
.mmt { display: block; left: 30px; bottom: 30px; font-size: 3.6em; }

.marquee { display: none; }	
	
	
	
	
.marqcase .marq {   margin: 0px 0px; }
	
.marqcase .marx .client-logo {  width: 75px; aspect-ratio: 7 / 5; }	

	
	
/*marqcase - note to self - need to add a class for h1 and text for staff so we can control the css */

.marqcase .marq .project {  aspect-ratio: 5 / 10; margin-right: 30px; }	  

.marqcase .marq .project .pdc {  transform: translateY(0px); }	  

.marqcase .marq .project .pdc p { opacity: 1; }
	
.marqcase .marq .project .pdc .logo img {  width: 75px; height: 75px; }
	
.marqcase .marq .project img { width: 330px; }	
	
.marqcase .marq .project video { width: 330px; }
	
.marqcase .marq .staff { width: 300px; aspect-ratio: 5 / 9; margin-right: 30px; }

.marqcase .marq .staff:first-of-type { margin-left: 30px; }	 

.marqcase .marq .staff:last-of-type { margin-left: 0px; }	 

.marqcase .marq .staff .details {  transform: translateY(0px); }	 

.marqcase .marq a:last-of-type .project { margin-right: 30px;}

.marqcase .marq a:first-of-type .project { margin-left: 30px; }	 

.marqcase .marq .staff .img { height: 100%; }	  

.marqcase .marq .staff .img img { transform: inherit; /* watch out! this scales up the linkedin logo as well */  }

.marqcase .marq .staff .details p {opacity: 1; }

.marqcase .marq .staff .details img.li.icon { transform: inherit; }	  

.marqcase .marq .shadow { bottom: 0; top:inherit; height: 50%; }
	
.marqcase .marq .project.recent-project img {    width: 300px;    object-fit: cover;         aspect-ratio: 1 / 2; }
	
.marqcase .marq .project.recent-project video { position: relative; width: 300px; height: auto;         aspect-ratio: 1 / 2; }

.marqcase .marq .project .pdc .services {    display: none; }
	
	
	
	
	
	
	
	
	
.new-work-marquee h1 { text-align: center; }	  


	
	
	
	
.navq { right: 30px; top: 30px; transition: var(--cubic); }	
	
.navq ul { display: none; }
	


.nav-icon {  padding: 13px; border: transparent solid 2px; }

.nav-icon .line {  width: 30px; }
	
.nav-icon:hover { border: transparent solid 2px; }	
	
.nav-icon:hover .line { width: 25px;     border: transparent  solid 0px; }	 
	
.nav-icon.active .line:nth-of-type(1) { transform: rotate(45deg) translate(3px, -3px); }
	
.nav-icon.active .line:nth-of-type(3) { transform: rotate(-45deg) translate(3px, 3px);  }	
	
	
	
	


.seamless {  -webkit-column-count: 1; -moz-column-count: 1; column-count: 1; }



.overlay { height: 100dvh; }
	
.overlay .bgcolor { height: 100dvh; }
	
.overlay .navigation { width: calc(100% - 60px); padding-bottom: 30px; }
	
.overlay .navigation ul li a {         font-size: 11vw; line-height: 0.85em; margin-bottom: 0px; }

.overlay .navigation ul li ul {  display: none; }	


	
	
.other { display: flex; gap:30px }

.other .project { grid-template-columns: 1fr; height: 50dvh; }	  

.other a:nth-of-type(2) .project { position: relative; height: 50dvh; position: relative;}	  

.other .project .pdc .deets { transform: translateY(0px); }	  

.other .project .pdc h5 { opacity: 1; }	  

.other .project .pdc p { opacity: 1; }	

.other .project .pdc .logo img { width: 75px; }	  

.other h1 { grid-column: span 1; text-align: center; margin-bottom: 0px; }	
	
	

	
.pvtabs h6 { font-size: 1.8em; display: block; float: none; margin: 0; }

	

	
.shorts {    grid-template-columns: auto;   gap: 30px;  }
	
	
	
.services .core { grid-template-columns: 1fr; gap: 25px; }
	
.services .core .thumbs:nth-of-type(even) { margin-top:0px; }

.services .core .thumbs:nth-of-type(4) { margin-top:0px; }

.services .core-services {  grid-template-columns: 1fr; gap: 25px; }	 

.services .core-services .line { display: none; }

.services .core-services.hci { grid-template-columns: 1fr;  /* Our Unique Selling Points */  }	  
	

	
	
.shadow { height: 77%; }
	


.strict { min-height: auto; }

.waterfall .wf { width: 150px; height: auto; }

.waterfall .wf-1 { top: 9%;   left: 38%; }

.waterfall .wf-2 { top: 67%; left: 75%; }	  

.waterfall .wf-3 {  top: 17%; left: 76%; }	  

.waterfall .wf-4 { top: 15%; left: 0%; }	  

.waterfall .wf-5 {top: 85%; left: 37%; }	  

.waterfall .wf-6 {top: 75%; left: -3%; }







.yt { height: 30dvh; clip-path: inset(30px); }

.yt .cta { filter: opacity(1); transform: translateY(0px); }  

.yt video { transform: translate(-50%, -50%); filter: brightness(0.44); }	  






	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
}