:root{
  --yellow:#F9CB08;
  --orange-1:#FFC825;
  --orange-2:#FF7A1A;
  --orange-3:#E8402C;
  --bg-black:#0a0a0a;
  --white:#ffffff;
  --muted:rgba(255,255,255,0.62);
  --pad-x: 78px;
  --content-scale: 1;

  --glass-bg: rgba(255,255,255,0.045);
  --glass-bg-strong: rgba(255,255,255,0.07);
  --glass-border: rgba(255,255,255,0.1);
  --radius-lg: 22px;
  --radius-md: 14px;
  --section-pad-y: 150px;
  --ease-out: cubic-bezier(.16,.84,.44,1);
}

*{margin:0;padding:0;box-sizing:border-box;}

html{
  scroll-behavior:smooth;
}

html,body{
  width:100%;
  background:var(--bg-black);
  font-family:'Inter',Arial,sans-serif;
  color:var(--white);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

a{color:inherit;text-decoration:none;}

img{display:block;max-width:100%;}

.hero{
  position:relative;
  width:100%;
  height:100vh;
  min-height:760px;
  overflow:hidden;
  background:var(--bg-black);
}

#home,
#about,
#mixes,
#events,
#contact{
  scroll-margin-top:88px;
}

.mobile-only{display:none;}

.hero-bg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:63% 50%;
  z-index:0;
}

.hero-overlay-left{
  position:absolute;
  inset:0;
  z-index:1;
  background:linear-gradient(90deg,
    rgba(0,0,0,0.88) 0%,
    rgba(0,0,0,0.72) 22%,
    rgba(0,0,0,0.42) 40%,
    rgba(0,0,0,0.14) 56%,
    rgba(0,0,0,0.05) 68%,
    rgba(0,0,0,0) 82%
  );
}

.hero-overlay-bottom{
  position:absolute;
  inset:0;
  z-index:1;
  background:linear-gradient(to top,
    rgba(0,0,0,0.82) 0%,
    rgba(0,0,0,0.55) 8%,
    rgba(0,0,0,0.16) 16%,
    rgba(0,0,0,0) 26%
  );
}

/* ---------- HEADER ---------- */
.site-header{
  position:fixed;
  top:0;
  left:0;
  right:0;
  z-index:100;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:28px var(--pad-x) 0;
  background:transparent;
  border-bottom:1px solid transparent;
  transition:background .35s ease, border-color .35s ease, padding .35s ease, backdrop-filter .35s ease;
}

.site-header.scrolled{
  padding-top:16px;
  padding-bottom:16px;
  background:rgba(8,8,8,0.72);
  backdrop-filter:blur(18px) saturate(140%);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
  border-bottom:1px solid rgba(255,255,255,0.08);
  box-shadow:0 10px 40px rgba(0,0,0,0.35);
}

.logo{
  font-family:'Anton',Impact,sans-serif;
  font-size:40px;
  letter-spacing:0.5px;
  color:var(--yellow);
  font-style:italic;
  transform:skewX(-8deg);
  display:inline-block;
  text-shadow:0 0 18px rgba(249,203,8,0.35);
}

.nav-group{
  display:flex;
  align-items:center;
  gap:64px;
}

.main-nav{
  display:flex;
  align-items:center;
  gap:34px;
}

.main-nav a{
  font-size:13px;
  font-weight:600;
  letter-spacing:1.4px;
  color:var(--white);
  padding-bottom:9px;
  position:relative;
  white-space:nowrap;
}

.main-nav a.active{
  color:var(--white);
}

.main-nav a.active::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:2px;
  background:var(--yellow);
}

.social-icons{
  display:flex;
  align-items:center;
  gap:22px;
}

.social-icon{
  color:var(--white);
  display:flex;
  align-items:center;
  width:21px;
  height:21px;
}
.social-icon svg{width:100%;height:100%;}
.social-icon.soundcloud{width:28px;height:17px;}

/* ---------- Mobile nav toggle + overlay menu ---------- */
.nav-toggle{
  display:none;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:5px;
  width:34px;
  height:34px;
  background:none;
  border:none;
  cursor:pointer;
  z-index:210;
}
.nav-toggle span{
  display:block;
  width:22px;
  height:2px;
  background:var(--white);
  border-radius:2px;
  transition:transform .3s ease, opacity .3s ease;
}
.nav-toggle.open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.nav-toggle.open span:nth-child(2){opacity:0;}
.nav-toggle.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

.mobile-menu{
  position:fixed;
  inset:0;
  z-index:200;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:40px;
  background:rgba(8,7,6,0.97);
  backdrop-filter:blur(20px);
  opacity:0;
  pointer-events:none;
  transition:opacity .35s ease;
}
.mobile-menu.open{
  opacity:1;
  pointer-events:auto;
}
.mobile-menu nav{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:26px;
}
.mobile-menu nav a{
  font-family:'Anton',Impact,sans-serif;
  font-size:34px;
  letter-spacing:1px;
  color:var(--white);
  font-style:italic;
}
.mobile-menu nav a.active{color:var(--yellow);}
.mobile-menu .social-icons{gap:26px;}
.mobile-menu .social-icon{width:24px;height:24px;}

/* ---------- LEFT HERO CONTENT ---------- */
.hero-content{
  position:absolute;
  left:var(--pad-x);
  top:125px;
  transform:scale(var(--content-scale));
  transform-origin:left top;
  z-index:10;
  width:700px;
}

.eyebrow{
  font-size:13px;
  font-weight:600;
  letter-spacing:6px;
  color:var(--white);
  margin-bottom:23px;
}

.headline{
  position:relative;
  font-family:'Anton',Impact,sans-serif;
  font-weight:400;
  height:310px;
  margin-bottom:17px;
}

.headline .line-white{
  position:absolute;
  left:0;
  display:block;
  font-size:120px;
  line-height:1;
  color:var(--white);
  letter-spacing:0.5px;
  text-shadow:0 3px 10px rgba(0,0,0,0.5);
  white-space:nowrap;
}

.headline .line-music{
  top:-14px;
}

.headline .line-that{
  top:82px;
}

.headline .line-brush{
  position:absolute;
  top:118px;
  left:98px;
  display:block;
  font-family:'Permanent Marker',cursive;
  font-size:152px;
  line-height:1;
  transform:rotate(-4deg);
  transform-origin:left top;
  background:linear-gradient(100deg,#FFD54A 0%, #FFB020 28%, #FF7A1A 58%, #E8402C 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  filter:drop-shadow(0 0 22px rgba(255,122,26,0.45)) drop-shadow(0 4px 6px rgba(0,0,0,0.4));
  white-space:nowrap;
}

.tagline{
  font-size:13px;
  font-weight:600;
  letter-spacing:4px;
  color:var(--white);
  margin-bottom:39px;
}

.role{
  font-size:15px;
  font-weight:700;
  letter-spacing:2px;
  margin-bottom:4px;
}

.body-copy{
  font-size:14px;
  font-weight:400;
  line-height:1.5;
  color:rgba(255,255,255,0.88);
  margin-bottom:32px;
  max-width:460px;
}

.cta-row{
  display:flex;
  align-items:center;
  gap:24px;
}

.btn{
  display:inline-flex;
  align-items:center;
  gap:12px;
  height:62px;
  padding:0 24px;
  border-radius:3px;
  font-size:15px;
  font-weight:700;
  letter-spacing:1.2px;
  white-space:nowrap;
}

.btn-primary{min-width:296px;justify-content:flex-start;}
.btn-secondary{min-width:268px;justify-content:flex-start;}
.btn-arrow{margin-left:auto;}

.btn-icon{width:21px;height:21px;flex-shrink:0;}
.btn-arrow{width:18px;height:18px;flex-shrink:0;margin-left:auto;}

.btn-primary{
  background:var(--yellow);
  color:#141200;
}

.btn-secondary{
  background:transparent;
  color:var(--white);
  border:1.5px solid rgba(255,255,255,0.85);
}

/* ---------- RIGHT SCRIPT TEXT ---------- */
.script-text{
  position:absolute;
  right:60px;
  top:355px;
  z-index:6;
  text-align:right;
  transform:rotate(-2deg) scale(var(--content-scale));
  transform-origin:right top;
}

.script-text p{
  font-family:'Alex Brush',cursive;
  font-size:58px;
  line-height:0.86;
  color:var(--white);
  text-shadow:0 2px 14px rgba(0,0,0,0.55);
}

.script-underline{
  width:225px;
  height:16px;
  margin-top:4px;
  margin-left:auto;
  opacity:0.9;
}

/* ---------- BOTTOM STRIP ---------- */
.bottom-strip{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  z-index:10;
  display:flex;
  align-items:center;
  padding:22px var(--pad-x) 20px;
}

.strip-item{
  flex:1;
  display:flex;
  align-items:center;
  gap:12px;
  min-width:0;
}

.strip-item svg{
  width:32px;
  height:32px;
  color:var(--white);
  flex-shrink:0;
}

.strip-text{
  display:flex;
  flex-direction:column;
  gap:3px;
  min-width:0;
}

.strip-title{
  font-size:14px;
  font-weight:700;
  letter-spacing:1.2px;
  color:var(--white);
}

.strip-sub{
  font-size:10px;
  font-weight:500;
  letter-spacing:1.6px;
  color:rgba(255,255,255,0.55);
  white-space:nowrap;
}

.strip-divider{
  width:1px;
  height:38px;
  background:rgba(255,255,255,0.2);
  margin:0 22px;
  flex-shrink:0;
}

/* ==================================================================
   SHARED SECTION UTILITIES
   ================================================================== */

.reveal{
  opacity:0;
  transform:translateY(36px);
  transition:opacity .9s var(--ease-out), transform .9s var(--ease-out);
  will-change:opacity, transform;
}
.reveal.in-view{
  opacity:1;
  transform:translateY(0);
}

.glow-blob{
  position:absolute;
  border-radius:50%;
  filter:blur(90px);
  pointer-events:none;
  z-index:0;
}
.glow-blob-1{
  width:640px;height:640px;
  top:-160px; left:-200px;
  background:radial-gradient(circle,rgba(232,64,44,0.22),transparent 70%);
}
.glow-blob-2{
  width:700px;height:700px;
  top:10%; right:-260px;
  background:radial-gradient(circle,rgba(249,203,8,0.14),transparent 70%);
}
.glow-blob-3{
  width:600px;height:600px;
  bottom:-220px; left:50%;
  transform:translateX(-50%);
  background:radial-gradient(circle,rgba(255,122,26,0.16),transparent 70%);
}

.section-eyebrow{
  display:inline-block;
  font-size:13px;
  font-weight:700;
  letter-spacing:4px;
  color:var(--yellow);
  margin-bottom:14px;
}

.section-heading{
  font-family:'Inter',Arial,sans-serif;
  font-weight:800;
  font-size:44px;
  line-height:1.12;
  letter-spacing:-0.5px;
  color:var(--white);
  margin-bottom:20px;
}

.section-sub{
  font-size:16px;
  color:rgba(255,255,255,0.62);
  max-width:560px;
  line-height:1.6;
  margin-bottom:56px;
}

.text-gradient{
  background:linear-gradient(100deg,#FFD54A 0%, #FFB020 35%, #FF7A1A 70%, #E8402C 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

.center{
  text-align:center;
  margin-left:auto;
  margin-right:auto;
}

/* ==================================================================
   ABOUT
   ================================================================== */
.about{
  position:relative;
  background:#0a0908;
  padding:var(--section-pad-y) var(--pad-x) 100px;
  overflow:hidden;
}

.about-inner{
  position:relative;
  z-index:1;
  max-width:1360px;
  margin:0 auto;
  display:grid;
  grid-template-columns:0.85fr 1.15fr;
  gap:100px;
  align-items:center;
}

.about-media{
  position:relative;
}

.about-photo-main{
  border-radius:var(--radius-lg);
  overflow:hidden;
  aspect-ratio:4/5;
  border:1px solid var(--glass-border);
  box-shadow:0 30px 70px rgba(0,0,0,0.55);
}
.about-photo-main img{
  width:100%;height:100%;object-fit:cover;object-position:center 20%;
}

.about-badge{
  position:absolute;
  top:24px;
  left:-28px;
  display:flex;
  flex-direction:column;
  gap:2px;
  padding:14px 20px;
  background:rgba(10,9,8,0.75);
  border:1px solid var(--glass-border);
  border-radius:var(--radius-md);
  backdrop-filter:blur(16px);
  box-shadow:0 16px 40px rgba(0,0,0,0.45);
}
.about-badge-num{
  font-size:22px;
  font-weight:800;
  color:var(--yellow);
  line-height:1;
}
.about-badge-label{
  font-size:10px;
  font-weight:600;
  letter-spacing:1px;
  text-transform:uppercase;
  color:rgba(255,255,255,0.6);
}

.about-content{
  display:flex;
  flex-direction:column;
}

.about-lede{
  font-size:20px;
  font-weight:600;
  color:var(--white);
  line-height:1.5;
  margin-bottom:18px;
}

.about-body{
  font-size:15.5px;
  color:rgba(255,255,255,0.64);
  line-height:1.75;
  margin-bottom:36px;
  max-width:540px;
}

.stat-row{
  display:flex;
  gap:16px;
  margin-bottom:40px;
  flex-wrap:wrap;
}

.stat-pill{
  display:flex;
  flex-direction:column;
  gap:4px;
  padding:16px 22px;
  background:var(--glass-bg);
  border:1px solid var(--glass-border);
  border-radius:var(--radius-md);
  transition:transform .3s var(--ease-out), border-color .3s ease, background .3s ease;
}
.stat-pill:hover{
  transform:translateY(-4px);
  border-color:rgba(249,203,8,0.4);
  background:var(--glass-bg-strong);
}
.stat-num{
  font-size:24px;
  font-weight:800;
  color:var(--white);
}
.stat-label{
  font-size:11px;
  font-weight:600;
  letter-spacing:0.6px;
  text-transform:uppercase;
  color:rgba(255,255,255,0.5);
}

.mini-gallery{
  position:relative;
  z-index:1;
  max-width:1360px;
  margin:100px auto 0;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px;
}
.mini-gallery-item{
  aspect-ratio:1/1;
  border-radius:var(--radius-md);
  overflow:hidden;
  border:1px solid var(--glass-border);
}
.mini-gallery-item img{
  width:100%;height:100%;object-fit:cover;
  transition:transform .6s var(--ease-out), filter .6s ease;
  filter:saturate(0.9);
}
.mini-gallery-item:hover img{
  transform:scale(1.08);
  filter:saturate(1.1);
}

/* ==================================================================
   MIXES
   ================================================================== */
.mixes{
  position:relative;
  background:#0c0a08;
  padding:var(--section-pad-y) var(--pad-x);
  overflow:hidden;
}

.mixes-inner{
  position:relative;
  z-index:1;
  max-width:1360px;
  margin:0 auto;
}

.mixes-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:26px;
  margin-bottom:56px;
}

.mix-card{
  background:var(--glass-bg);
  border:1px solid var(--glass-border);
  border-radius:var(--radius-lg);
  overflow:hidden;
  transition:transform .4s var(--ease-out), border-color .4s ease, box-shadow .4s ease;
}
.mix-card:hover{
  transform:translateY(-8px);
  border-color:rgba(249,203,8,0.35);
  box-shadow:0 30px 60px rgba(0,0,0,0.5);
}
.mixes-grid .mix-card:nth-child(1){transition-delay:0s}
.mixes-grid .mix-card:nth-child(2){transition-delay:.08s}
.mixes-grid .mix-card:nth-child(3){transition-delay:.16s}
.mixes-grid .mix-card:nth-child(4){transition-delay:.24s}

.mix-video{
  position:relative;
  width:100%;
  aspect-ratio:16/9;
  background:#000;
}
.mix-video iframe{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border:0;
}

.mix-info{
  padding:18px 20px 22px;
}
.mix-tag{
  display:inline-block;
  font-size:10px;
  font-weight:700;
  letter-spacing:1px;
  text-transform:uppercase;
  color:var(--yellow);
  background:rgba(249,203,8,0.1);
  border:1px solid rgba(249,203,8,0.25);
  padding:5px 10px;
  border-radius:100px;
  margin-bottom:10px;
}
.mix-info h3{
  font-size:16.5px;
  font-weight:700;
  color:var(--white);
}

.mixes-cta{
  display:flex;
  width:fit-content;
  margin:0 auto;
}

/* ==================================================================
   EVENTS
   ================================================================== */
.events{
  position:relative;
  background:#0a0908;
  padding:var(--section-pad-y) var(--pad-x);
}

.events-inner{
  max-width:1360px;
  margin:0 auto;
}

.events-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:22px;
  margin-bottom:36px;
}

.event-card{
  position:relative;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  aspect-ratio:3/3.6;
  padding:26px;
  border-radius:var(--radius-lg);
  border:1px solid var(--glass-border);
  overflow:hidden;
  background-size:cover;
  background-position:center;
  color:var(--white);
  transition:transform .45s var(--ease-out), box-shadow .45s ease, border-color .45s ease;
}
.events-grid .event-card:nth-child(1){transition-delay:0s}
.events-grid .event-card:nth-child(2){transition-delay:.08s}
.events-grid .event-card:nth-child(3){transition-delay:.16s}
.events-grid .event-card:nth-child(4){transition-delay:.24s}

.event-card:hover{
  transform:translateY(-10px);
  border-color:rgba(249,203,8,0.4);
  box-shadow:0 30px 60px rgba(0,0,0,0.55);
}

.event-card-overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(to top, rgba(5,5,5,0.92) 0%, rgba(5,5,5,0.55) 45%, rgba(5,5,5,0.15) 75%);
  transition:background .45s ease;
  z-index:0;
}
.event-card:hover .event-card-overlay{
  background:linear-gradient(to top, rgba(5,5,5,0.96) 0%, rgba(5,5,5,0.6) 45%, rgba(5,5,5,0.2) 75%);
}

.event-card-plain{
  background-color:var(--glass-bg);
  align-items:center;
  text-align:center;
  justify-content:center;
}
.event-card-plain:hover{
  background-color:var(--glass-bg-strong);
}

.event-icon{
  position:relative;
  z-index:1;
  width:30px;
  height:30px;
  color:var(--yellow);
  margin-bottom:12px;
}

.event-card h3{
  position:relative;
  z-index:1;
  font-size:19px;
  font-weight:700;
  margin-bottom:4px;
}
.event-card p{
  position:relative;
  z-index:1;
  font-size:12.5px;
  letter-spacing:0.6px;
  text-transform:uppercase;
  color:rgba(255,255,255,0.7);
}

.upcoming-panel{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:40px;
  background:var(--glass-bg);
  border:1px solid var(--glass-border);
  border-radius:var(--radius-lg);
  padding:40px 48px;
}
.upcoming-text h3{
  font-size:22px;
  font-weight:800;
  color:var(--white);
  margin-bottom:10px;
}
.upcoming-text p{
  font-size:14.5px;
  color:rgba(255,255,255,0.6);
  max-width:520px;
  line-height:1.6;
}
.upcoming-text p a{
  color:var(--yellow);
  font-weight:600;
}
.upcoming-panel .btn{
  flex-shrink:0;
}

/* ==================================================================
   CONTACT
   ================================================================== */
.contact{
  position:relative;
  background:#0c0a08;
  padding:var(--section-pad-y) var(--pad-x);
  overflow:hidden;
}

.contact-inner{
  position:relative;
  z-index:1;
  max-width:1360px;
  margin:0 auto;
  display:grid;
  grid-template-columns:0.9fr 1.1fr;
  gap:90px;
  align-items:start;
}

.contact-lede{
  font-size:16px;
  color:rgba(255,255,255,0.64);
  line-height:1.7;
  max-width:440px;
  margin-bottom:32px;
}

.contact-email{
  display:inline-flex;
  align-items:center;
  gap:12px;
  font-size:16px;
  font-weight:700;
  color:var(--white);
  padding:16px 24px;
  background:var(--glass-bg);
  border:1px solid var(--glass-border);
  border-radius:100px;
  margin-bottom:32px;
  transition:border-color .3s ease, background .3s ease, transform .3s ease;
}
.contact-email svg{width:20px;height:20px;color:var(--yellow);flex-shrink:0;}
.contact-email:hover{
  border-color:rgba(249,203,8,0.4);
  background:var(--glass-bg-strong);
  transform:translateY(-2px);
}

.contact-socials{
  display:flex;
  gap:16px;
}
.contact-socials .social-icon{
  width:40px;
  height:40px;
  background:var(--glass-bg);
  border:1px solid var(--glass-border);
  border-radius:50%;
  justify-content:center;
  padding:10px;
  transition:border-color .3s ease, background .3s ease, transform .3s ease;
}
.contact-socials .social-icon:hover{
  border-color:rgba(249,203,8,0.4);
  background:var(--glass-bg-strong);
  transform:translateY(-3px);
}

.contact-form{
  background:var(--glass-bg);
  border:1px solid var(--glass-border);
  border-radius:var(--radius-lg);
  padding:44px;
}

.form-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px;
  margin-bottom:20px;
}

.form-field{
  position:relative;
  margin-bottom:20px;
}
.form-row .form-field{margin-bottom:0;}

.form-field input,
.form-field select,
.form-field textarea{
  width:100%;
  background:rgba(255,255,255,0.035);
  border:1px solid rgba(255,255,255,0.14);
  border-radius:10px;
  padding:18px 16px 8px;
  font-family:'Inter',Arial,sans-serif;
  font-size:14.5px;
  color:var(--white);
  transition:border-color .25s ease, background .25s ease;
  appearance:none;
}
.form-field textarea{
  padding-top:22px;
  resize:vertical;
  min-height:110px;
}
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus{
  outline:none;
  border-color:var(--yellow);
  background:rgba(255,255,255,0.055);
}

.form-field label{
  position:absolute;
  left:16px;
  top:18px;
  font-size:14.5px;
  color:rgba(255,255,255,0.45);
  pointer-events:none;
  transition:all .2s ease;
}

.form-field input:focus ~ label,
.form-field input:not(:placeholder-shown) ~ label,
.form-field textarea:focus ~ label,
.form-field textarea:not(:placeholder-shown) ~ label{
  top:8px;
  font-size:10.5px;
  letter-spacing:0.6px;
  text-transform:uppercase;
  color:var(--yellow);
}

.form-field select ~ label,
.form-field input[type="date"] ~ label{
  top:8px;
  font-size:10.5px;
  letter-spacing:0.6px;
  text-transform:uppercase;
  color:rgba(255,255,255,0.45);
}
.form-field select:focus ~ label,
.form-field input[type="date"]:focus ~ label{
  color:var(--yellow);
}

.form-field select{padding-top:22px;color:var(--white);}
.form-field select option{background:#111;color:var(--white);}
.form-field input[type="date"]{padding-top:22px;color-scheme:dark;}

.form-submit{
  width:100%;
  justify-content:center;
  margin-top:4px;
}

.form-note{
  margin-top:16px;
  font-size:13px;
  text-align:center;
  color:rgba(255,255,255,0.55);
  min-height:18px;
}
.form-note.success{color:#7CE29A;}

/* ==================================================================
   FOOTER
   ================================================================== */
.site-footer{
  background:#070605;
  border-top:1px solid var(--glass-border);
  padding:44px var(--pad-x) 26px;
}
.footer-inner{
  max-width:1360px;
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  flex-wrap:wrap;
  padding-bottom:28px;
  border-bottom:1px solid rgba(255,255,255,0.06);
}
.footer-logo{font-size:26px;}
.footer-nav{
  display:flex;
  gap:32px;
}
.footer-nav a{
  font-size:13px;
  font-weight:600;
  letter-spacing:1px;
  color:rgba(255,255,255,0.65);
  transition:color .25s ease;
}
.footer-nav a:hover{color:var(--yellow);}
.footer-socials .social-icon{width:18px;height:18px;}
.footer-socials{gap:20px;}
.footer-copy{
  max-width:1360px;
  margin:0 auto;
  padding-top:22px;
  font-size:12.5px;
  color:rgba(255,255,255,0.4);
  text-align:center;
}

/* ---------- RESPONSIVE ---------- */
/* Reference design width is 1672px. .hero-content and .script-text scale
   as one unit via --content-scale so the composition never changes,
   only its size — per spec: scale typography, don't redesign layout. */

@media (max-width:1920px){
  :root{--content-scale: 1;}
}

@media (max-width:1500px){
  :root{--pad-x:56px; --content-scale:0.82;}
  .nav-group{gap:44px;}
  .main-nav{gap:26px;}
  .main-nav a{font-size:12px;letter-spacing:1.2px;}
  .social-icons{gap:18px;}
  .logo{font-size:34px;}
  .strip-title{font-size:13px;}
  .strip-sub{font-size:9.5px;white-space:normal;}
  .strip-item svg{width:27px;height:27px;}
  .strip-divider{margin:0 16px;}
}

@media (max-width:1400px){
  :root{--pad-x:48px; --content-scale:0.74;}
  .nav-group{gap:30px;}
  .main-nav{gap:20px;}
  .main-nav a{font-size:11px;letter-spacing:1px;}
  .social-icons{gap:15px;}
  .logo{font-size:30px;}
  .strip-text{gap:2px;}
  .strip-title{font-size:12px;}
  .strip-sub{font-size:9px;letter-spacing:1.2px;}
  .strip-item svg{width:24px;height:24px;}
  .strip-item{gap:9px;}
  .strip-divider{margin:0 10px;}
  .bottom-strip{padding:18px var(--pad-x) 16px;}
}

/* ---- Below-the-fold sections: independent of --content-scale ---- */

@media (max-width:1300px){
  :root{--section-pad-y:110px;}
  .about-inner{gap:60px;}
  .section-heading{font-size:38px;}
  .mixes-grid{grid-template-columns:repeat(2,1fr);}
  .events-grid{grid-template-columns:repeat(2,1fr);}
  .contact-inner{gap:56px;}
}

@media (max-width:1100px){
  .about-inner{grid-template-columns:1fr;}
  .about-media{max-width:460px;margin:0 auto 40px;}
  .about-content{text-align:left;}
  .mini-gallery{grid-template-columns:repeat(2,1fr);max-width:600px;}
  .contact-inner{grid-template-columns:1fr;}
  .contact-form{max-width:600px;}
}

/* ==================================================================
   MOBILE SYSTEM (<=900px) — bespoke layouts, desktop hidden entirely.
   Desktop rules above are untouched; nothing here should leak upward.
   ================================================================== */
@media (max-width:900px){
  /* Shared header still used on mobile: logo + hamburger only */
  :root{--pad-x:24px;}
  .site-header{padding:18px var(--pad-x) 0;}
  .site-header.scrolled{padding-top:13px;padding-bottom:13px;}
  .nav-group{gap:0;}
  .main-nav{display:none;}
  .nav-toggle{display:flex;}
  .logo{font-size:26px;}
  .site-header > .nav-group > .social-icons{display:none;}

  /* Hide every desktop section; show the bespoke mobile ones */
  .hero,
  .about,
  .mixes,
  .events,
  .contact,
  .site-footer{display:none;}

  .mobile-only{display:block;}
}

/* ==================================================================
   MOBILE SHARED TYPE / UTILITIES
   ================================================================== */
@media (max-width:900px){
  .m-eyebrow-label{
    display:block;
    font-size:12px;
    font-weight:700;
    letter-spacing:3px;
    color:var(--yellow);
    margin-bottom:12px;
  }
  .m-eyebrow-label.center{text-align:center;}

  .m-section-heading{
    font-family:'Inter',Arial,sans-serif;
    font-weight:800;
    font-size:clamp(28px,7.5vw,36px);
    line-height:1.16;
    letter-spacing:-0.3px;
    color:var(--white);
    margin-bottom:16px;
  }
  .m-section-heading.center{text-align:center;}

  .m-section-sub{
    font-size:15px;
    color:rgba(255,255,255,0.6);
    line-height:1.6;
    margin-bottom:32px;
  }
  .m-section-sub.center{text-align:center;}

  /* Shared mobile button */
  .m-btn{
    display:flex;
    align-items:center;
    gap:12px;
    height:58px;
    padding:0 22px;
    border-radius:4px;
    font-size:15px;
    font-weight:700;
    letter-spacing:0.8px;
    white-space:nowrap;
  }
  .m-btn .btn-icon{width:21px;height:21px;flex-shrink:0;}
  .m-btn .btn-arrow{width:18px;height:18px;flex-shrink:0;margin-left:auto;}
  .m-btn-primary{background:var(--yellow);color:#141200;}
  .m-btn-secondary{background:transparent;color:var(--white);border:1.5px solid rgba(255,255,255,0.8);}
  .m-btn-block{width:100%;justify-content:center;}
  .m-btn-block .btn-arrow{margin-left:auto;}

  .text-gradient{ /* keep desktop gradient definition in play */ }
}

/* ==================================================================
   MOBILE HERO
   ================================================================== */
@media (max-width:900px){
  .mobile-hero{
    position:relative;
    width:100%;
    min-height:100vh;
    overflow:hidden;
    background:#000;
    display:flex;
    flex-direction:column;
  }

  .mobile-hero-bg{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:58% 22%;
    z-index:0;
  }

  .mobile-hero-overlay-top{
    position:absolute;
    top:0; left:0; right:0;
    height:160px;
    z-index:1;
    background:linear-gradient(to bottom, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.15) 70%, rgba(0,0,0,0) 100%);
  }

  .mobile-hero-overlay-bottom{
    position:absolute;
    inset:0;
    z-index:1;
    background:linear-gradient(to bottom,
      rgba(0,0,0,0.15) 0%,
      rgba(0,0,0,0.22) 22%,
      rgba(0,0,0,0.5) 38%,
      rgba(0,0,0,0.72) 52%,
      rgba(0,0,0,0.88) 68%,
      rgba(0,0,0,0.95) 82%,
      rgba(0,0,0,0.98) 100%
    );
  }

  .m-hero-content{
    position:relative;
    z-index:2;
    padding:114px 24px 0;
    max-width:600px;
    margin:0 auto;
    width:100%;
    box-sizing:border-box;
  }

  .m-eyebrow{
    font-size:12.5px;
    font-weight:600;
    letter-spacing:5px;
    color:var(--white);
    margin-bottom:12px;
  }

  .m-headline{
    font-family:'Anton',Impact,sans-serif;
    font-weight:400;
    margin-bottom:26px;
  }

  .m-line-white{
    display:block;
    font-size:clamp(58px,17vw,80px);
    line-height:0.86;
    color:var(--white);
    letter-spacing:0.5px;
    text-shadow:0 3px 10px rgba(0,0,0,0.5);
  }
  .m-line-that{margin-top:-2px;}

  .m-line-brush{
    display:block;
    width:fit-content;
    font-family:'Permanent Marker',cursive;
    font-size:clamp(60px,18vw,88px);
    line-height:0.85;
    margin-top:-10px;
    margin-left:6%;
    transform:rotate(-3deg);
    transform-origin:left top;
    background:linear-gradient(100deg,#FFD54A 0%, #FFB020 28%, #FF7A1A 58%, #E8402C 100%);
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
    filter:drop-shadow(0 0 16px rgba(255,122,26,0.4)) drop-shadow(0 3px 5px rgba(0,0,0,0.35));
    white-space:nowrap;
  }

  .m-tagline{
    font-size:12px;
    font-weight:600;
    letter-spacing:3px;
    color:var(--white);
    margin-bottom:22px;
  }

  .m-role{
    font-size:15px;
    font-weight:700;
    letter-spacing:1.5px;
    color:var(--white);
    margin-bottom:8px;
  }

  .m-body{
    font-size:14.5px;
    line-height:1.55;
    color:rgba(255,255,255,0.86);
    margin-bottom:24px;
  }

  .m-cta-col{
    display:flex;
    flex-direction:column;
    gap:12px;
    margin-bottom:24px;
  }

  .m-script{
    width:fit-content;
    margin:0 0 12px auto;
    text-align:right;
  }
  .m-script p{
    font-family:'Alex Brush',cursive;
    font-size:clamp(30px,9vw,40px);
    line-height:0.88;
    color:var(--white);
    text-shadow:0 2px 10px rgba(0,0,0,0.55);
  }
  .m-script-underline{
    width:130px;
    height:14px;
    margin-top:2px;
    margin-left:auto;
    opacity:0.9;
    display:block;
  }

  .m-bottom-strip{
    position:relative;
    z-index:2;
    display:flex;
    align-items:flex-start;
    padding:14px 14px 18px;
    margin-top:auto;
  }
  .m-strip-item{
    flex:1;
    min-width:0;
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
    gap:5px;
    padding:0 4px;
  }
  .m-strip-item svg{
    width:22px;
    height:22px;
    color:var(--white);
  }
  .m-strip-title{
    font-size:10.5px;
    font-weight:700;
    letter-spacing:0.4px;
    color:var(--white);
  }
  .m-strip-sub{
    font-size:7.8px;
    font-weight:500;
    letter-spacing:0.2px;
    color:rgba(255,255,255,0.55);
    line-height:1.3;
  }
  .m-strip-divider{
    width:1px;
    align-self:stretch;
    background:rgba(255,255,255,0.18);
    flex-shrink:0;
    margin-top:2px;
  }
}

/* ==================================================================
   MOBILE ABOUT
   ================================================================== */
@media (max-width:900px){
  .m-about{
    background:#0a0908;
    padding:84px 24px 56px;
  }
  .m-about-inner-max{max-width:600px;margin:0 auto;}

  .m-about-photo{
    position:relative;
    width:100%;
    max-width:600px;
    margin:0 auto 28px;
    aspect-ratio:0.95/1;
    border-radius:18px;
    overflow:hidden;
    border:1px solid var(--glass-border);
    box-shadow:0 20px 45px rgba(0,0,0,0.5);
  }
  .m-about-photo img{
    width:100%;height:100%;object-fit:cover;object-position:center 18%;
  }
  .m-about-badge{
    position:absolute;
    top:16px;left:16px;
    display:flex;
    flex-direction:column;
    gap:2px;
    padding:10px 16px;
    background:rgba(10,9,8,0.78);
    border:1px solid var(--glass-border);
    border-radius:10px;
    backdrop-filter:blur(10px);
  }
  .m-about-badge-num{font-size:18px;font-weight:800;color:var(--yellow);line-height:1;}
  .m-about-badge-label{font-size:9px;font-weight:600;letter-spacing:0.5px;text-transform:uppercase;color:rgba(255,255,255,0.65);}

  .m-about > .m-eyebrow-label,
  .m-about > .m-section-heading,
  .m-about > .m-about-lede,
  .m-about > .m-about-body,
  .m-about > .m-stat-grid,
  .m-about > .m-btn{
    max-width:600px;
    margin-left:auto;
    margin-right:auto;
  }
  .m-about > .m-stat-grid{display:grid;}

  .m-about-lede{
    font-size:17px;
    font-weight:600;
    color:var(--white);
    line-height:1.5;
    margin-bottom:16px;
  }
  .m-about-body{
    font-size:14.5px;
    color:rgba(255,255,255,0.62);
    line-height:1.7;
    margin-bottom:26px;
  }

  .m-stat-grid{
    grid-template-columns:1fr 1fr;
    gap:12px;
    margin-bottom:26px;
  }
  .m-stat-card{
    background:#141210;
    border:1px solid var(--glass-border);
    border-radius:12px;
    padding:16px 18px;
    display:flex;
    flex-direction:column;
    gap:4px;
  }
  .m-stat-card-wide{grid-column:1/-1;}
  .m-stat-num{font-size:22px;font-weight:800;color:var(--white);}
  .m-stat-label{font-size:10.5px;font-weight:600;letter-spacing:0.4px;text-transform:uppercase;color:rgba(255,255,255,0.5);}
}

/* ==================================================================
   MOBILE MIXES
   ================================================================== */
@media (max-width:900px){
  .m-mixes{
    position:relative;
    background:#0c0a08;
    padding:84px 24px 56px;
    overflow:hidden;
  }

  .m-mixes-list{
    position:relative;
    z-index:1;
    max-width:600px;
    margin:0 auto 30px;
    display:flex;
    flex-direction:column;
    gap:14px;
  }

  .m-mix-card{
    display:flex;
    align-items:center;
    gap:14px;
    background:#141210;
    border:1px solid var(--glass-border);
    border-radius:14px;
    padding:10px;
  }

  .m-mix-thumb{
    position:relative;
    flex-shrink:0;
    width:118px;
    aspect-ratio:16/10;
    border-radius:8px;
    overflow:hidden;
    background:#000;
  }
  .m-mix-thumb iframe{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    border:0;
  }

  .m-mix-info{
    flex:1;
    min-width:0;
    display:flex;
    flex-direction:column;
    gap:3px;
  }
  .m-mix-tag{
    align-self:flex-start;
    font-size:9px;
    font-weight:700;
    letter-spacing:0.4px;
    text-transform:uppercase;
    color:var(--yellow);
    background:rgba(249,203,8,0.1);
    border:1px solid rgba(249,203,8,0.28);
    padding:3px 8px;
    border-radius:100px;
    margin-bottom:2px;
  }
  .m-mix-info h3{
    font-size:15px;
    font-weight:700;
    color:var(--white);
    line-height:1.2;
  }
  .m-mix-sub{
    font-size:11px;
    color:rgba(255,255,255,0.48);
  }

  .m-mixes .m-btn{position:relative;z-index:1;max-width:600px;margin:0 auto;}
}

/* ==================================================================
   MOBILE EVENTS
   ================================================================== */
@media (max-width:900px){
  .m-events{
    background:#0a0908;
    padding:84px 24px 56px;
  }

  .m-events-grid{
    max-width:600px;
    margin:0 auto 20px;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:14px;
  }

  .m-event-card{
    position:relative;
    display:flex;
    flex-direction:column;
    justify-content:flex-end;
    aspect-ratio:1/1.2;
    padding:16px;
    border-radius:16px;
    border:1px solid var(--glass-border);
    overflow:hidden;
    background-size:cover;
    background-position:center;
    color:var(--white);
  }
  .m-event-icon{
    position:relative;
    z-index:1;
    width:23px;
    height:23px;
    color:var(--yellow);
    margin-bottom:8px;
  }
  .m-event-card h3{
    position:relative;
    z-index:1;
    font-size:14.5px;
    font-weight:700;
    line-height:1.18;
    margin-bottom:3px;
  }
  .m-event-card p{
    position:relative;
    z-index:1;
    font-size:9.5px;
    letter-spacing:0.3px;
    text-transform:uppercase;
    color:rgba(255,255,255,0.72);
  }

  .m-upcoming-panel{
    max-width:600px;
    margin:0 auto;
    background:#131110;
    border:1px solid var(--glass-border);
    border-radius:16px;
    padding:26px 22px;
  }
  .m-upcoming-panel h3{
    font-size:19px;
    font-weight:800;
    color:var(--white);
    margin:8px 0 10px;
  }
  .m-upcoming-panel p{
    font-size:13.5px;
    color:rgba(255,255,255,0.6);
    line-height:1.6;
    margin-bottom:20px;
  }
  .m-upcoming-panel p a{
    color:var(--yellow);
    font-weight:600;
  }
}

/* ==================================================================
   MOBILE CONTACT
   ================================================================== */
@media (max-width:900px){
  .m-contact{
    position:relative;
    background:#0c0a08;
    padding:84px 24px 56px;
    overflow:hidden;
  }

  .m-contact > *{position:relative;z-index:1;}

  .m-contact .m-eyebrow-label,
  .m-contact .m-section-heading,
  .m-contact-lede,
  .m-contact-email,
  .m-contact-socials,
  .m-contact-form{
    max-width:600px;
    margin-left:auto;
    margin-right:auto;
  }
  .m-contact-socials{display:flex;}
  .m-contact-form{display:block;}

  .m-contact-lede{
    font-size:15px;
    color:rgba(255,255,255,0.62);
    line-height:1.65;
    margin-bottom:22px;
  }

  .m-contact-email{
    display:flex;
    align-items:center;
    gap:10px;
    font-size:15px;
    font-weight:700;
    color:var(--white);
    padding:14px 20px;
    background:#141210;
    border:1px solid var(--glass-border);
    border-radius:100px;
    margin-bottom:22px;
    width:fit-content;
  }
  .m-contact-email svg{width:18px;height:18px;color:var(--yellow);flex-shrink:0;}

  .m-contact-socials{
    gap:12px;
    margin-bottom:32px;
  }
  .m-contact-socials .social-icon{
    width:42px;
    height:42px;
    background:#141210;
    border:1px solid var(--glass-border);
    border-radius:50%;
    justify-content:center;
    padding:11px;
  }

  .m-contact-form{
    background:#131110;
    border:1px solid var(--glass-border);
    border-radius:16px;
    padding:22px;
  }

  .m-form-field{margin-bottom:16px;}
  .m-form-field:last-of-type{margin-bottom:22px;}

  .m-form-field input,
  .m-form-field select,
  .m-form-field textarea{
    width:100%;
    background:#0d0c0b;
    border:1px solid rgba(255,255,255,0.16);
    border-radius:10px;
    padding:16px;
    font-family:'Inter',Arial,sans-serif;
    font-size:15px;
    color:var(--white);
    appearance:none;
  }
  .m-form-field input::placeholder,
  .m-form-field textarea::placeholder{color:rgba(255,255,255,0.4);}
  .m-form-field input:focus,
  .m-form-field select:focus,
  .m-form-field textarea:focus{outline:none;border-color:var(--yellow);background:#111009;}

  .m-form-field textarea{min-height:120px;resize:vertical;}

  .m-form-field-select label,
  .m-form-field-date label{
    display:block;
    font-size:10.5px;
    font-weight:600;
    letter-spacing:0.6px;
    text-transform:uppercase;
    color:rgba(255,255,255,0.5);
    margin-bottom:7px;
  }

  .m-form-field select{
    color:var(--white);
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1L7 7L13 1' stroke='%23ffffff' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat:no-repeat;
    background-position:right 16px center;
    padding-right:40px;
  }
  .m-form-field select option{background:#111;color:var(--white);}

  .m-form-field input[type="date"]{color-scheme:dark;}

  .m-contact .form-note{
    margin-top:14px;
    font-size:13px;
    text-align:center;
    color:rgba(255,255,255,0.55);
  }
  .m-contact .form-note.success{color:#7CE29A;}
}

/* ==================================================================
   MOBILE FOOTER
   ================================================================== */
@media (max-width:900px){
  .m-footer{
    background:#070605;
    border-top:1px solid var(--glass-border);
    padding:48px 24px 28px;
    text-align:center;
  }
  .m-footer-logo{
    display:inline-block;
    font-size:28px;
    margin-bottom:24px;
  }
  .m-footer-nav{
    display:flex;
    justify-content:center;
    gap:20px;
    flex-wrap:wrap;
    margin-bottom:22px;
  }
  .m-footer-nav a{
    font-size:13px;
    font-weight:600;
    color:rgba(255,255,255,0.7);
  }
  .m-footer-socials{
    justify-content:center;
    gap:18px;
    margin-bottom:24px;
  }
  .m-footer-socials .social-icon{width:18px;height:18px;}
  .m-footer-divider{
    height:1px;
    background:rgba(255,255,255,0.08);
    margin-bottom:20px;
  }
  .m-footer .footer-copy{padding-top:0;}
}

/* ==================================================================
   MOBILE FINE-TUNING (very small phones)
   ================================================================== */
@media (max-width:360px){
  .m-line-white,.m-line-that{font-size:15vw;}
  .m-line-brush{font-size:16vw;}
}