@charset "UTF-8";



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

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






/*---------------------------------- iPhone 16 Pro Max - Portrait + Others ------------------------------*/

@media screen and (min-device-height: 300px)  and (max-device-width: 480px) and (orientation: portrait) {
  
	
body { font-size: 1.0em; }
	
section { position: relative; min-height: 100vh; }
	
p { font-family: "futura-pt", sans-serif; font-size: 1.4em; line-height: 1.1em; margin: 0px; margin-bottom: 20px; text-transform: uppercase; }
	
	
h1 { font-size: 7em; line-height: 0.8em;  letter-spacing: -10px; margin-bottom: 10px;}	
	
h2 { font-size: 3.2em; line-height: 0.85em; letter-spacing: -4px; }
	
h3 { font-size: 2.2em; line-height: 1.0em; margin: 0px;margin-bottom: 25px; }
	
h4 { font-size: 2.2em; line-height: 1.0em; margin: 0px; }	
	
footer section p {    font-size: 1.2em;   line-height: 1.25em;  margin: 0px; }	
	
	
.bio { padding: 100px 30px;  display: grid; grid-template-columns: 1fr; gap: 0px; }	

.bio h2 { font-size: 2.2em; line-height: 0.85em; letter-spacing: -4px;  }	

.button { padding: 15px 15px; border: 3px solid black; font-size: 1.4em; font-weight: 500; }
	
	
	
.clients { grid-template-columns: 1fr 1fr; gap: 50px 25px; justify-items: center;}
	
.clients h2 { text-align: center; grid-column: 1 / span 2; }	
	
.clients img { position: relative;  max-width: 135px;  height: auto; }

.clients img:nth-of-type(3n+1) { text-align: center; grid-column: 1 / span 2; }	
	
.carousel { flex-wrap: wrap; height: auto; cursor: none; }
	
.carousel img {  position: relative;height: auto;  width: 100vw; }
	
.carousel .mastercard { position: absolute; display: none;  }
	
.carousel .mastercard h1 { font-size: 6.0em;line-height: 1.0em;  margin-bottom: 0px; }
	
.carousel .card video { position: relative; height: auto; width: 100vw; display: block; }
	
	
	
	
	
.collapsibles {   width: calc(100vw - 60px); padding: 100px 30px; }
	
.collapsibles .collapsible .expander p {  font-size: 1.6em; line-height: 1.25em; }
	
.collapsibles .collapsible .expander ul {  font-size: 1.6em; line-height: 1.15em; }
	
	
	
	
	

.hero h1 {  margin-top: 100px;}
	
	
	
	
.mixes {  position: relative;  padding: 100px 30px; width: calc(100vw - 60px); max-width: 1600px; align-items: center; display: grid;  justify-content: center; grid-template-columns: 1fr; gap: 0px; }	
	
.mixes .marqcase .marq {  height: auto; width: auto; display: grid; gap: 65px;}
	
.mixes .marqcase .marq .mix { margin-right: 0px; width: auto; overflow: hidden; display: grid; gap: 15px;}

.mixes .marqcase .marq .mix h1 {  font-size: 2.8em; line-height: 0.75em; }
	
.mixes .marqcase .marq .mix:first-of-type { position: relative;margin-left: 0px; }
	
	
nav .logo {   width: 150px; height: 50px; }	
	
	
.playlists {  padding: 100px 30px; display: grid; grid-template-columns: 1fr; gap: 50px; }
	
.playlists .overview { grid-column: 1 / span 1; }
	
.playlists .cta {    grid-column: 1 / span 1; }
	
.youtube { padding: 75px 30px; width: calc(100vw - 60px);  display: grid;  justify-content: center; grid-template-columns: 1fr; gap: 50px; }
	
	
.xmas {     padding: 100px 0px; grid-template-columns: 1fr; gap: 25px; }
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
}