/* ---------- Base ---------- */
:root{
  --black: #0A0A0C;
  --panel: #141418;
  --panel-2: #1a1a1f;
  --white: #F2F2F0;
  --dim: #96969e;
  --dim-2: #5c5c63;
  --orange: #FF6A2E;
  --cyan: #75D5E8;
  --ff-display: 'Space Grotesk', sans-serif;
  --ff-body: 'Manrope', sans-serif;
  --gap: clamp(1rem, 2.4vw, 1.75rem);
  --edge: 6vw;
}

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

body{
  background:var(--black);
  color:var(--white);
  font-family:var(--ff-body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{max-width:100%; display:block;}
a{color:inherit; text-decoration:none;}
ul, ol{list-style:none;}

/* ---------- Accessibility ---------- */
.skip-link{
  position:fixed; top:-100%; left:1rem; z-index:1000;
  background:var(--white); color:var(--black);
  padding:.7rem 1.1rem; font-family:var(--ff-display); font-weight:700;
  text-transform:uppercase; font-size:.85rem; letter-spacing:.03em;
  transition:top .2s ease;
}
.skip-link:focus{top:1rem;}

a:focus-visible, button:focus-visible{
  outline:2px solid var(--cyan); outline-offset:3px;
}

/* ---------- Layout helpers ---------- */
.section__frame{
  max-width:1320px;
  margin:0 auto;
  padding:0 var(--edge);
  position:relative;
  z-index:2;
}
.grid{
  display:grid;
  grid-template-columns:repeat(12, 1fr);
  gap:var(--gap);
}
.c-4{grid-column:span 4;}
.c-5{grid-column:span 5;}
.c-6{grid-column:span 6;}
.c-7{grid-column:span 7;}
.c-8{grid-column:span 8;}
.c-12{grid-column:span 12;}

.eyebrow{
  font-family:var(--ff-body);
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  font-size:.76rem;
  color:var(--dim);
  margin-bottom:1.3rem;
}
.eyebrow--accent{color:var(--cyan);}

.section__title{
  font-family:var(--ff-display);
  font-weight:700;
  text-transform:uppercase;
  font-size:clamp(2.2rem, 6.4vw, 4.2rem);
  line-height:.95;
  letter-spacing:-.015em;
  margin-bottom:1.8rem;
}
.section__title span{color:var(--orange);}
.section__title--tight{margin-bottom:1.3rem;}

.section{padding:clamp(3.5rem, 7vw, 5.5rem) 0;}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  font-family:var(--ff-display); font-weight:600; text-transform:uppercase;
  font-size:.85rem; letter-spacing:.04em;
  padding:.85rem 1.7rem; border-radius:100px;
  transition:background .25s ease, color .25s ease, border-color .25s ease, transform .25s ease;
}
.btn--solid{background:var(--white); color:var(--black);}
.btn--solid:hover{background:var(--orange); color:var(--white); transform:translateY(-2px);}
.btn--outline{background:transparent; color:var(--white); border:1.5px solid rgba(242,242,240,.4);}
.btn--outline:hover{border-color:var(--cyan); color:var(--cyan); transform:translateY(-2px);}
.btn--sm{padding:.6rem 1.2rem; font-size:.78rem;}

/* ---------- Noise overlay ---------- */
.noise{
  position:fixed; inset:0; pointer-events:none; z-index:999;
  opacity:.035; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Wordmark (plain <img>, RGB-split glitch via drop-shadow) ----------
   Uses a real <img> (not CSS mask-image) so it always loads reliably, including
   when the site is opened directly as a local file:// with no server. */
.mark{display:block;}
.mark--nav{width:66px; height:auto;}
.mark--hero{width:min(300px, 44vw); height:auto; margin-bottom:1rem;}
.mark--contact{width:min(280px, 46vw); height:auto; margin:0 auto 1.2rem;}

.mark--hero, .mark--contact{
  filter:drop-shadow(-3px 1px 0 var(--cyan)) drop-shadow(3px -1px 0 var(--orange));
  animation:glitchShift 6s ease-in-out infinite;
}
@keyframes glitchShift{
  0%, 92%, 100%{filter:drop-shadow(-3px 1px 0 var(--cyan)) drop-shadow(3px -1px 0 var(--orange));}
  93%{filter:drop-shadow(4px -2px 0 var(--cyan)) drop-shadow(-4px 2px 0 var(--orange));}
  94%{filter:drop-shadow(-6px 2px 0 var(--cyan)) drop-shadow(6px -2px 0 var(--orange));}
  95%{filter:drop-shadow(2px 1px 0 var(--cyan)) drop-shadow(-2px -1px 0 var(--orange));}
  96%{filter:drop-shadow(-3px 1px 0 var(--cyan)) drop-shadow(3px -1px 0 var(--orange));}
}
@media (prefers-reduced-motion: reduce){
  .mark--hero, .mark--contact{animation:none;}
}

/* ---------- Custom cursor ---------- */
@media (hover:hover) and (pointer:fine){
  body.has-cursor{cursor:none;}
  body.has-cursor a, body.has-cursor button{cursor:none;}
}
.cursor-dot, .cursor-ring{
  position:fixed; top:0; left:0; z-index:1000; pointer-events:none;
  border-radius:50%; transform:translate(-50%,-50%);
  will-change:transform;
}
.cursor-dot{width:6px; height:6px; background:var(--cyan);}
.cursor-ring{
  width:32px; height:32px; border:1.5px solid rgba(242,242,240,.5);
  transition:width .25s ease, height .25s ease, border-color .25s ease, background .25s ease;
}
.cursor-ring.hovered{
  width:50px; height:50px; border-color:var(--orange);
  background:rgba(255,106,46,.1);
}

/* ---------- Ambient glow blobs ---------- */
.glow{
  position:absolute; border-radius:50%; filter:blur(70px);
  pointer-events:none; z-index:0; opacity:.16;
}
.glow--cyan{background:var(--cyan);}
.glow--orange{background:var(--orange);}
.glow--a{width:32vw; height:32vw; max-width:420px; max-height:420px; top:-10%; left:-8%; animation:floatBlobA 16s ease-in-out infinite;}
.glow--b{width:26vw; height:26vw; max-width:360px; max-height:360px; bottom:-12%; right:-6%; animation:floatBlobB 19s ease-in-out infinite;}
@keyframes floatBlobA{
  0%,100%{transform:translate(0,0) scale(1);}
  50%{transform:translate(4vw,-3vh) scale(1.15);}
}
@keyframes floatBlobB{
  0%,100%{transform:translate(0,0) scale(1);}
  50%{transform:translate(-5vw,4vh) scale(1.1);}
}
@media (prefers-reduced-motion: reduce){
  .glow--a, .glow--b{animation:none;}
}

/* ---------- Nav ---------- */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  padding:1.1rem var(--edge);
  transition:padding .3s ease, background .3s ease, border-color .3s ease;
  border-bottom:1px solid transparent;
}
.nav.scrolled{
  padding:.75rem var(--edge);
  background:rgba(10,10,12,.88);
  backdrop-filter:blur(8px);
  border-bottom-color:rgba(242,242,240,.08);
}

.nav__links{
  display:flex; align-items:center; gap:2rem;
  font-family:var(--ff-body); font-weight:600; font-size:.82rem;
  letter-spacing:.03em; text-transform:uppercase;
  color:var(--white);
}
.nav__links a{opacity:.75; transition:opacity .25s, color .25s; position:relative; padding-bottom:2px;}
.nav__links a:not(.nav__cta)::after{
  content:''; position:absolute; left:0; right:0; bottom:-4px; height:1.5px;
  background:var(--cyan); transform:scaleX(0); transform-origin:left;
  transition:transform .3s ease;
}
.nav__links a:not(.nav__cta):hover::after,
.nav__links a:not(.nav__cta).is-active::after{transform:scaleX(1);}
.nav__links a:hover, .nav__links a.is-active{opacity:1; color:var(--cyan);}
.nav__cta{
  border:1px solid var(--white);
  padding:.45rem 1.05rem;
  border-radius:100px;
  display:inline-block;
  transition:border-color .25s, color .25s, transform .2s ease;
}
.nav__cta:hover{border-color:var(--cyan); color:var(--cyan) !important;}

.nav__toggle{
  display:none; flex-direction:column; gap:5px;
  background:none; border:none; cursor:pointer; padding:.5rem;
  z-index:110;
}
.nav__toggle span{width:22px; height:2px; background:var(--white); display:block; transition:transform .25s ease, opacity .25s 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);}

.nav-mobile{
  display:none;
  position:fixed; top:0; left:0; right:0; z-index:99;
  flex-direction:column;
  background:rgba(10,10,12,.98);
  padding-top:4.2rem;
  max-height:0; overflow:hidden; opacity:0;
  transition:max-height .35s ease, opacity .3s ease;
  border-bottom:1px solid rgba(242,242,240,.08);
}
.nav-mobile.open{max-height:480px; opacity:1;}
.nav-mobile a{
  padding:1rem var(--edge);
  font-family:var(--ff-display); font-weight:600; text-transform:uppercase;
  font-size:1.05rem; letter-spacing:.02em;
  border-top:1px solid rgba(242,242,240,.06);
}

/* ---------- Hero ---------- */
.hero{
  position:relative; height:100svh; min-height:560px;
  display:flex; align-items:flex-end;
  overflow:hidden;
  background:var(--black);
}
.hero__img{position:absolute; inset:-6% 0 0 0; width:100%; height:112%; will-change:transform; overflow:hidden; background:var(--black);}
/* Vertical phone video filling a wide hero — cover crops the sides, positioned
   to keep his head/torso in frame through the close-up parts of the clip. */
.hero__fg{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 45%;}
.hero__scrim{
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(10,10,12,.35) 0%, rgba(10,10,12,.1) 30%, rgba(10,10,12,.3) 60%, rgba(10,10,12,.97) 100%);
}
.hero__content{
  position:relative; z-index:2;
  width:100%;
  padding:0 var(--edge) 4.2rem;
  color:var(--white);
}
.hero__content .mark--hero,
.hero__content .hero__tagline,
.hero__content .hero__location,
.hero__content .hero__cta{
  opacity:0; transform:translateY(22px);
  animation:heroIn .9s cubic-bezier(.16,.8,.3,1) forwards;
}
.hero__content .hero__tagline{animation-delay:.15s;}
.hero__content .hero__location{animation-delay:.28s;}
.hero__content .hero__cta{animation-delay:.4s;}
@keyframes heroIn{to{opacity:1; transform:none;}}
@media (prefers-reduced-motion: reduce){
  .hero__content .mark--hero, .hero__content .hero__tagline,
  .hero__content .hero__location, .hero__content .hero__cta{
    animation:none; opacity:1; transform:none;
  }
}
.hero__tagline{
  font-family:var(--ff-display); font-weight:700; font-size:clamp(1rem,2.4vw,1.3rem);
  text-transform:uppercase; letter-spacing:.04em;
}
.hero__location{
  font-family:var(--ff-body); font-size:.9rem; color:var(--cyan);
  margin-top:.3rem; letter-spacing:.05em; text-transform:uppercase;
}
.hero__cta{display:flex; flex-wrap:wrap; gap:.9rem; margin-top:1.8rem;}
.hero__scroll{
  position:absolute; right:var(--edge); bottom:2.1rem; z-index:2;
  width:26px; height:44px; border:1.5px solid rgba(242,242,240,.6);
  border-radius:100px; display:flex; justify-content:center; padding-top:8px;
}
.hero__scroll span{
  width:4px; height:8px; border-radius:100px; background:var(--white);
  animation:scrollDot 1.8s infinite ease;
}
@keyframes scrollDot{
  0%{transform:translateY(0); opacity:1;}
  70%{transform:translateY(14px); opacity:0;}
  100%{opacity:0;}
}

/* ---------- Quick links (right under the hero) ---------- */
.quick-links{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:1.6rem;
  padding:1.5rem var(--edge);
  background:var(--black);
  border-bottom:1px solid rgba(242,242,240,.08);
}
.quick-links a{
  color:var(--dim);
  transition:color .25s ease, transform .25s ease;
}
.quick-links a svg{width:30px; height:30px; display:block;}
.quick-links a:hover{color:var(--cyan); transform:translateY(-2px);}

/* ---------- Reveal (progressive enhancement) ----------
   Elements are fully visible by default. JS adds .reveal-armed BEFORE
   removing/adding .in, and runs an immediate synchronous check — so if
   JS never runs (blocked/disabled) nothing is ever hidden. */
.reveal-armed{opacity:0; transform:translateY(26px); transition:opacity .7s ease, transform .7s ease;}
.reveal-armed.in{opacity:1; transform:none;}

/* Default (no JS, or JS hasn't armed these yet): fully visible. */
.bio__text p, .booth__names li, .label-card, .rider__block, .contact__links a{
  opacity:1; transform:none;
}
/* Once JS arms the *parent*, children drop out of view pre-reveal... */
.bio__grid.reveal-armed .bio__text p,
.booth__names.reveal-armed li,
.labels__list.reveal-armed .label-card,
.rider__grid.reveal-armed .rider__block,
.contact__frame.reveal-armed .contact__links a{
  opacity:0; transform:translateY(16px);
  transition:opacity .55s ease, transform .55s ease;
}
/* ...and back in once the parent is also marked .in (in view). */
.bio__grid.reveal-armed.in .bio__text p,
.booth__names.reveal-armed.in li,
.labels__list.reveal-armed.in .label-card,
.rider__grid.reveal-armed.in .rider__block,
.contact__frame.reveal-armed.in .contact__links a{
  opacity:1; transform:none;
}
.bio__text p:nth-child(1){transition-delay:.02s;}
.bio__text p:nth-child(2){transition-delay:.1s;}
.bio__text p:nth-child(3){transition-delay:.18s;}
.bio__text p:nth-child(4){transition-delay:.26s;}
.bio__text p:nth-child(5){transition-delay:.34s;}
.booth__names li:nth-child(1){transition-delay:.02s;}
.booth__names li:nth-child(2){transition-delay:.08s;}
.booth__names li:nth-child(3){transition-delay:.14s;}
.booth__names li:nth-child(4){transition-delay:.2s;}
.booth__names li:nth-child(5){transition-delay:.26s;}
.booth__names li:nth-child(6){transition-delay:.32s;}
.booth__names li:nth-child(7){transition-delay:.38s;}
.booth__names li:nth-child(8){transition-delay:.44s;}
.label-card:nth-child(1){transition-delay:.02s;}
.label-card:nth-child(2){transition-delay:.1s;}
.label-card:nth-child(3){transition-delay:.18s;}
.label-card:nth-child(4){transition-delay:.26s;}
.rider__block:nth-child(1){transition-delay:.02s;}
.rider__block:nth-child(2){transition-delay:.1s;}
.rider__block:nth-child(3){transition-delay:.18s;}
.rider__block:nth-child(4){transition-delay:.26s;}
.contact__links a:nth-child(1){transition-delay:.05s;}
.contact__links a:nth-child(2){transition-delay:.14s;}
.contact__links a:nth-child(3){transition-delay:.23s;}
@media (prefers-reduced-motion: reduce){
  .reveal-armed, .bio__text p, .booth__names li, .label-card, .rider__block, .contact__links a{
    opacity:1 !important; transform:none !important; transition:none !important;
  }
}

/* ---------- Bio ---------- */
.bio__grid{align-items:start;}
.bio__text p{margin-bottom:1.25rem; font-size:1.03rem; color:#c9c9cf;}
.bio__lead{
  font-family:var(--ff-display); font-weight:700; font-size:1.35rem; line-height:1.4;
  color:var(--white);
}
.bio__lead strong{color:var(--cyan);}
.bio__text em{color:var(--orange); font-style:normal;}
.bio__text strong{color:var(--white);}
.bio__side{display:flex; flex-direction:column; gap:1.5rem;}
.bio__portrait{overflow:hidden; aspect-ratio:3/4;}
.bio__portrait img{width:100%; height:100%; object-fit:cover;}
.fact-sheet{border-top:1px solid rgba(242,242,240,.1);}
.fact-sheet__row{
  display:flex; justify-content:space-between; align-items:baseline; gap:1rem;
  padding:.7rem 0; border-bottom:1px solid rgba(242,242,240,.1);
}
.fact-sheet__row dt{
  font-family:var(--ff-body); font-weight:700; text-transform:uppercase;
  letter-spacing:.08em; font-size:.72rem; color:var(--dim);
}
.fact-sheet__row dd{
  font-family:var(--ff-display); font-weight:600; font-size:.92rem; text-align:right;
}

/* ---------- Shared booth ---------- */
.booth{padding:5rem 0; position:relative; overflow:hidden;}
.booth__names{display:flex; flex-direction:column;}
.booth__names li{
  font-family:var(--ff-display); font-weight:700; text-transform:uppercase;
  font-size:clamp(2rem, 7.4vw, 5.4rem);
  line-height:1.02; letter-spacing:-.01em;
  padding:.12em 0;
  border-bottom:1px solid rgba(242,242,240,.08);
  transition:transform .3s ease, color .25s ease, padding-left .3s ease;
  will-change:transform;
}
.booth__names li:hover{padding-left:.3em; color:var(--cyan) !important;}
.booth__names li:nth-child(3n+1){color:var(--white);}
.booth__names li:nth-child(3n+2){color:var(--dim);}
.booth__names li:nth-child(3n){color:var(--orange);}
.booth__note{margin-top:1.6rem; color:var(--dim); font-size:.9rem;}

/* ---------- Sellos / labels ---------- */
.labels__intro{margin-bottom:3.5rem;}
.labels__intro p{max-width:640px; color:#c9c9cf; font-size:1.05rem;}

.labels__list{
  display:grid; grid-template-columns:repeat(3,1fr); gap:var(--gap);
}
.label-card{background:var(--panel); padding:1.3rem 1.2rem;}
.label-card__head{
  display:flex; justify-content:space-between; align-items:baseline;
  border-bottom:1px solid rgba(242,242,240,.12); padding-bottom:.6rem; margin-bottom:.7rem;
}
.label-card__head h3{
  font-family:var(--ff-display); font-weight:700; font-size:.98rem;
  text-transform:uppercase; letter-spacing:.01em;
}
.label-card__count{
  font-family:var(--ff-display); font-size:.75rem; color:var(--dim-2);
}
.release-list li{
  display:flex; align-items:baseline; gap:.7rem;
  padding:.32rem 0; border-bottom:1px solid rgba(242,242,240,.06);
}
.release-list__n{font-family:var(--ff-display); font-size:.72rem; color:var(--dim-2);}
.release-list__t{font-size:.9rem; color:var(--dim);}
.release-list__t em{font-style:normal; display:block; font-size:.76rem; opacity:.75;}
.labels__more{
  display:inline-block; margin-top:2rem;
  font-family:var(--ff-display); font-weight:600; text-transform:uppercase;
  font-size:.9rem; letter-spacing:.03em;
  border-bottom:2px solid var(--cyan); padding-bottom:.2rem;
  transition:color .25s ease, border-color .25s ease;
}
.labels__more:hover{color:var(--orange); border-color:var(--orange);}

/* ---------- Don't Floor (Khan's own label) ---------- */
.label-feature{
  margin-top:3rem; padding:2.2rem clamp(1.3rem, 3vw, 2.4rem);
  background:var(--panel); border-left:3px solid var(--cyan);
}
.label-feature__logo{width:min(240px, 60vw); height:auto; margin-bottom:1.3rem;}
.label-feature__tag{
  font-family:var(--ff-body); font-weight:700; text-transform:uppercase;
  letter-spacing:.1em; font-size:.72rem; color:var(--cyan); margin-bottom:1.4rem;
}
.label-feature__body{max-width:720px;}
.label-feature__body p{color:#c9c9cf; font-size:.98rem; margin-bottom:1rem;}
.label-feature__closing{
  color:var(--white) !important; font-family:var(--ff-display); font-weight:600;
  font-size:1.05rem; margin-bottom:0 !important;
}
.label-feature__releases{margin-top:1.8rem; max-width:420px;}
.label-feature__releases h3{
  font-family:var(--ff-display); font-weight:700; text-transform:uppercase;
  font-size:.85rem; letter-spacing:.05em; color:var(--cyan); margin-bottom:.8rem;
}
.label-feature__links{
  display:flex; flex-wrap:wrap; gap:.7rem; margin-top:1.6rem;
}

/* ---------- Música ---------- */
.music{position:relative; overflow:hidden;}
.music .section__title{margin-bottom:2.3rem;}
.music__label{
  font-family:var(--ff-display); font-weight:700; text-transform:uppercase;
  letter-spacing:.06em; font-size:.83rem; color:var(--cyan);
  margin:2.4rem 0 1rem;
}
.music__label:first-of-type{margin-top:0;}

.feature-track{
  position:relative; overflow:hidden;
  background:var(--panel); padding:1.8rem 1.8rem;
  border-left:3px solid var(--orange);
}
.feature-track__mark{
  position:absolute; top:1rem; right:1rem; width:130px; height:auto;
  opacity:.06;
  pointer-events:none;
}
.feature-track__link{
  display:flex; align-items:center; gap:1.5rem; flex-wrap:wrap;
  position:relative; z-index:1;
}
.feature-track__body{display:flex; flex-direction:column; gap:.3rem;}
.feature-track__platform{
  font-family:var(--ff-display); font-weight:700; font-size:.75rem;
  text-transform:uppercase; letter-spacing:.06em; color:var(--dim);
}
.feature-track__title{
  font-family:var(--ff-display); font-weight:700; font-size:clamp(1.8rem,5vw,3rem); line-height:1;
}
.feature-track__artist{
  font-family:var(--ff-body); font-size:.85rem; color:var(--dim); text-transform:uppercase; letter-spacing:.04em;
}
.feature-track__go{
  margin-left:auto; display:flex; align-items:center; gap:.4rem;
  font-family:var(--ff-display); font-weight:600; text-transform:uppercase; font-size:.9rem;
  color:var(--orange); transition:color .25s ease;
}
.feature-track__go svg{transition:transform .25s ease;}
.feature-track__link:hover .feature-track__go{color:var(--cyan);}
.feature-track__link:hover .feature-track__go svg{transform:translate(3px,-3px);}

.chart-proof{
  position:relative; z-index:1;
  margin-top:1.6rem; padding-top:1.4rem;
  border-top:1px solid rgba(242,242,240,.12);
}
.chart-proof__imgs{
  display:flex; gap:.8rem; overflow-x:auto; margin-bottom:1rem;
}
.chart-proof__imgs img{
  height:12rem; width:auto; flex-shrink:0; border-radius:4px;
}
.chart-proof__caption{color:var(--dim); font-size:.9rem; max-width:640px;}
.chart-proof__caption strong{color:var(--orange); font-family:var(--ff-display);}

.music__links{display:flex; flex-wrap:wrap; gap:.8rem;}

.music__spotify{display:grid; grid-template-columns:1fr 1fr; gap:1rem;}
.music__embed{border-radius:8px; display:block; border:0;}

.music__sets{display:grid; grid-template-columns:1fr 1fr; gap:1rem;}
.set-card{
  position:relative; display:block; overflow:hidden;
  aspect-ratio:16/9; background:var(--black);
}
.set-card img{width:100%; height:100%; object-fit:cover; transition:transform .4s ease, filter .4s ease;}
.set-card:hover img{transform:scale(1.04); filter:brightness(.75);}
.set-card__play{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:58px; height:58px; border-radius:50%;
  background:rgba(10,10,12,.55); backdrop-filter:blur(2px);
  display:flex; align-items:center; justify-content:center;
  color:var(--white); border:1.5px solid rgba(242,242,240,.7);
  transition:background .25s ease, transform .25s ease;
}
.set-card:hover .set-card__play{background:var(--orange); transform:translate(-50%,-50%) scale(1.08);}
.set-card__play svg{margin-left:3px;}
.set-card__title{
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  padding:1rem 1.1rem .8rem;
  background:linear-gradient(0deg, rgba(10,10,12,.9), transparent);
  font-family:var(--ff-display); font-weight:600; text-transform:uppercase;
  font-size:.78rem; letter-spacing:.03em; color:var(--white);
}

/* ---------- Rider ---------- */
.rider{position:relative; overflow:hidden;}
.rider__grid{display:grid; grid-template-columns:repeat(4, 1fr); gap:var(--gap);}
.rider__icon{width:28px; height:28px; color:var(--cyan); margin-bottom:1rem; display:block;}
.rider__block{
  border-top:2px solid var(--orange); padding-top:1.3rem;
  transition:transform .3s ease, border-color .3s ease;
}
.rider__block:hover{transform:translateY(-4px); border-color:var(--cyan);}
.rider__block:hover .rider__icon{color:var(--orange);}
.rider__block h3{
  font-family:var(--ff-display); font-weight:700; text-transform:uppercase;
  font-size:.92rem; letter-spacing:.05em; color:var(--white); margin-bottom:.7rem;
}
.rider__block p{font-family:var(--ff-display); font-weight:500; font-size:1.1rem; line-height:1.4;}
.rider__block p span{display:block; font-family:var(--ff-body); font-weight:400; font-size:.82rem; color:var(--dim); margin-top:.3rem;}

/* ---------- Contact ---------- */
.contact{padding:clamp(4.5rem,9vw,7rem) 0 4.5rem; position:relative; overflow:hidden;}
.contact__frame{text-align:center; display:flex; flex-direction:column; align-items:center;}
.contact__tagline{
  font-family:var(--ff-display); text-transform:uppercase; letter-spacing:.08em;
  color:var(--dim); font-size:.83rem; margin-bottom:1.8rem;
}
.contact__direct{
  display:flex; flex-direction:column; gap:.4rem;
  margin-bottom:2.2rem;
}
.contact__direct a{
  font-family:var(--ff-display); font-weight:700; font-size:clamp(1.7rem,5.6vw,2.8rem);
  transition:color .25s ease;
}
.contact__direct a:hover{color:var(--cyan);}
.contact__links{
  display:flex; flex-wrap:wrap; justify-content:center; gap:.8rem 1.3rem;
}
.contact__links a{
  display:inline-flex; align-items:center; gap:.4rem;
  font-family:var(--ff-display); font-weight:600; text-transform:uppercase;
  font-size:clamp(.82rem,1.6vw,.95rem); color:var(--dim);
  padding-bottom:.15rem;
  border-bottom:2px solid transparent;
  transition:border-color .25s ease, color .25s ease;
}
.contact__links a:hover{border-color:var(--orange); color:var(--white);}
.contact__icon{width:1em; height:1em; flex-shrink:0;}

/* ---------- Footer ---------- */
.footer{
  background:var(--black); color:var(--dim-2);
  text-align:center; padding:1.5rem; font-size:.76rem; letter-spacing:.03em;
  border-top:1px solid rgba(242,242,240,.06);
}

/* ---------- Responsive ---------- */
@media (max-width: 860px){
  .nav__links{display:none;}
  .nav__toggle{display:flex;}
  .nav-mobile{display:flex;}

  .c-4, .c-5, .c-6, .c-7, .c-8{grid-column:span 12;}
  .bio__side{order:-1; max-width:420px; margin:0 auto;}

  .rider__grid{grid-template-columns:1fr 1fr;}
  .labels__list{grid-template-columns:1fr 1fr;}

  .section{padding:clamp(3rem, 8vw, 4rem) 0;}
}

@media (max-width: 480px){
  .rider__grid{grid-template-columns:1fr;}
  .labels__list{grid-template-columns:1fr;}
  .music__spotify, .music__sets{grid-template-columns:1fr;}
}