:root{
  --black:#050505;--ink:#f5f5f2;--gray:#8b8b86;--line:rgba(255,255,255,.11);
  --lime:#dfff38;--max:1240px;
  --display:"Space Grotesk",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --body:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--black);color:var(--ink);font-family:var(--body);-webkit-font-smoothing:antialiased}
h1,h2,h3,.bigTitle,.statementText,.about h2,.contactBox h2{font-family:var(--display)}
a{color:inherit;text-decoration:none}
button{font:inherit}
.wrap{width:min(calc(100% - 48px),var(--max));margin:auto}

/* ACCESSIBILITY */
.skipLink{position:absolute;left:-999px;top:auto;background:var(--lime);color:#050505;padding:12px 18px;border-radius:0 0 8px 0;z-index:100;font-family:var(--mono);font-size:12px}
.skipLink:focus{left:0;top:0}
a:focus-visible,button:focus-visible{outline:2px solid var(--lime);outline-offset:3px;border-radius:2px}
@media(prefers-reduced-motion:reduce){
  *{animation-duration:.001s!important;animation-iteration-count:1!important;transition-duration:.001s!important;scroll-behavior:auto!important}
  .fade{opacity:1!important;transform:none!important}
}

/* NAV */
.nav{position:fixed;z-index:50;top:0;left:0;right:0;height:64px;background:rgba(5,5,5,.62);backdrop-filter:blur(22px) saturate(140%);border-bottom:1px solid transparent;transition:.35s}
.nav.scrolled{border-color:var(--line)}
.navin{height:100%;display:flex;align-items:center;justify-content:space-between}
.logo{font-family:var(--display);font-size:18px;font-weight:700;letter-spacing:-.04em}.logo i{font-style:normal;color:var(--lime)}
.links{display:flex;gap:30px;color:#aaa;font-family:var(--mono);font-size:11px}.links a{transition:.2s}.links a:hover{color:white}
.navcta{font-family:var(--mono);font-size:11px;padding:9px 15px;border:1px solid var(--line);border-radius:99px;transition:.25s}.navcta:hover{background:white;color:#050505}

/* GLOBAL TYPE */
.eyebrow{font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--lime)}
.section{padding:170px 0}
.sectionLabel{font-family:var(--mono);font-size:10px;color:#62625e;letter-spacing:.15em;text-transform:uppercase}
.fade{opacity:0;transform:translateY(30px);transition:opacity 1s cubic-bezier(.16,1,.3,1),transform 1s cubic-bezier(.16,1,.3,1)}
.fade.on{opacity:1;transform:none}

/* HERO */
.hero{min-height:100svh;position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;padding-bottom:40px}
.heroGlow{position:absolute;width:65vw;height:65vw;right:-22vw;top:-12vw;border-radius:50%;background:radial-gradient(circle,rgba(223,255,56,.13),rgba(223,255,56,.025) 30%,transparent 68%);filter:blur(30px)}
.heroGrid{position:absolute;inset:0;opacity:.035;background-image:linear-gradient(90deg,#fff 1px,transparent 1px),linear-gradient(#fff 1px,transparent 1px);background-size:90px 90px;mask-image:linear-gradient(to bottom,black,transparent 78%)}
.heroInner{position:relative;padding-top:90px}
.heroKicker{display:flex;align-items:center;gap:12px;margin-bottom:28px;font-family:var(--mono)}
.heroKicker:before{content:"";width:28px;height:1px;background:var(--lime)}
.hero h1{font-size:clamp(76px,12vw,175px);font-weight:700;letter-spacing:-.06em;line-height:.78;margin:0;max-width:1100px}
.hero h1 .outline{color:transparent;-webkit-text-stroke:1px rgba(245,245,242,.48)}

/* HERO WAVEFORM — the site's signature motif: a live-looking audio waveform,
   generated in js/main.js so bar count/heights are randomised per load */
.heroWave{display:flex;align-items:flex-end;gap:3px;height:44px;margin-top:48px;opacity:.9}
.heroWave span{display:block;width:3px;min-height:3px;border-radius:2px;background:var(--lime);transform-origin:bottom center;animation:wavePulse 1.6s ease-in-out infinite}
@keyframes wavePulse{0%,100%{transform:scaleY(var(--min,.3))}50%{transform:scaleY(var(--max,1))}}

.heroFoot{margin-top:36px;display:grid;grid-template-columns:1fr auto;align-items:end;gap:50px}
.heroCopy{max-width:420px;color:#9a9a95;font-size:15px;line-height:1.7}
.pill{display:inline-flex;align-items:center;gap:12px;margin-top:24px;background:var(--lime);color:#080808;padding:14px 19px;border-radius:999px;font-family:var(--mono);font-size:11px;font-weight:500;transition:.25s}.pill:hover{transform:translateY(-3px)}
.scrollCue{font-family:var(--mono);font-size:9px;letter-spacing:.2em;color:#555;text-transform:uppercase;writing-mode:vertical-rl;display:flex;align-items:center;gap:12px}.scrollCue:after{content:"";width:1px;height:55px;background:#444}

/* STATEMENT */
.statement{min-height:100vh;display:flex;align-items:center}
.statementText{font-size:clamp(47px,7.5vw,105px);font-weight:700;letter-spacing:-.05em;line-height:.98;max-width:1080px}
.statementText span{color:#484844}
.statementMeta{margin-top:55px;display:flex;justify-content:space-between;align-items:end;border-top:1px solid var(--line);padding-top:18px;color:#666;font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase}

/* BEATS */
.beatsIntro{display:grid;grid-template-columns:1fr 300px;gap:50px;align-items:end;margin-bottom:70px}
.bigTitle{font-size:clamp(52px,7vw,96px);line-height:.88;letter-spacing:-.05em;font-weight:700;margin-top:12px}
.beatsIntro p{color:#74746f;font-size:13px;line-height:1.7;margin:0}
.beatList{border-top:1px solid var(--line)}
.beat{display:grid;grid-template-columns:70px 1fr auto;gap:28px;align-items:center;min-height:125px;border-bottom:1px solid var(--line);transition:.45s;padding:0 8px}
.beat:hover{background:#0d0d0d;padding-left:22px;padding-right:22px}
.beatNo{font-family:var(--mono);font-size:10px;color:#555}
.beatName{font-family:var(--display);font-size:30px;letter-spacing:-.03em}
.beatMeta{color:#666;font-family:var(--mono);font-size:10px;text-transform:uppercase;letter-spacing:.1em;margin-top:7px}
.play{width:44px;height:44px;border:1px solid #333;background:none;color:#ddd;border-radius:50%;cursor:pointer;transition:.3s}.play:hover{background:var(--lime);color:#050505;border-color:var(--lime)}
.play[disabled]{opacity:.35;cursor:not-allowed}
.audio{display:none}
.catalogLink{display:inline-block;margin-top:30px;font-family:var(--mono);font-size:11px;letter-spacing:.08em;color:var(--gray);border-bottom:1px solid var(--line);padding-bottom:3px;transition:.25s}
.catalogLink:hover{color:var(--lime);border-color:var(--lime)}

/* PROCESS — three steps, visible all at once. No scroll-jacking: this used to
   be a pinned scrollytelling section, but that made visitors scroll a full
   extra screen-height just to read three short sentences. A plain row reads
   faster and respects the fact that this genuinely is a 3-step sequence. */
.processGrid{margin-top:60px;display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line)}
.step{padding:44px 34px 50px;border-right:1px solid var(--line);position:relative}
.step:last-child{border-right:0}
.step:not(:last-child):after{content:"→";position:absolute;top:56px;right:-15px;width:29px;height:22px;background:var(--black);color:#484844;font-family:var(--mono);font-size:14px;text-align:center;z-index:1}
.stepCircle{width:52px;height:52px;border:1px solid var(--lime);border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:13px;color:var(--lime);margin-bottom:30px}
.step h3{font-size:27px;letter-spacing:-.03em;margin:0 0 14px;font-weight:700}
.step p{color:#858580;font-size:14px;line-height:1.75;margin:0;max-width:320px}

/* SERVICES */
.serviceGrid{margin-top:65px;display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line)}
.service{padding:30px 24px 55px;border-right:1px solid var(--line);min-height:320px}.service:last-child{border:0}
.serviceNo{color:var(--lime);font-family:var(--mono);font-size:10px}
.service h3{font-size:31px;letter-spacing:-.03em;margin-top:100px;margin-bottom:16px;font-weight:700}
.service p{color:#70706c;font-size:13px;line-height:1.7;margin:0}

/* ARTISTS / TESTIMONIALS — list layout (same structural language as the beat
   list) so it scales cleanly to any real testimonial count */
.reviewHead{display:flex;justify-content:space-between;align-items:end;margin-bottom:30px}
.reviewList{border-top:1px solid var(--line)}
.reviewRow{padding:42px 8px;border-bottom:1px solid var(--line);transition:.3s}
.reviewRow:hover{background:#0d0d0d;padding-left:22px;padding-right:22px}
.stars{color:var(--lime);letter-spacing:4px;font-size:11px;margin-bottom:16px}
.quote{font-family:var(--display);font-size:clamp(22px,2.4vw,32px);letter-spacing:-.03em;line-height:1.2;max-width:700px;font-weight:500}
.artist{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:#666;margin-top:16px}

/* ABOUT */
.about{display:grid;grid-template-columns:1.25fr .75fr;gap:100px;align-items:start}
.about h2{font-size:clamp(55px,7vw,100px);line-height:.88;letter-spacing:-.055em;margin:0;font-weight:700}
.about h2 span{color:#484844}
.aboutCopy{color:#82827d;font-size:14px;line-height:1.8;margin-top:12px}
.facts{margin-top:50px;border-top:1px solid var(--line);display:grid;grid-template-columns:repeat(3,1fr)}
.fact{padding:20px 20px 20px 0;border-bottom:1px solid var(--line)}
.fact strong{font-family:var(--display);font-size:32px;letter-spacing:-.03em;display:block}
.fact small{font-family:var(--mono);font-size:9px;color:#5d5d59;letter-spacing:.12em;text-transform:uppercase}

/* CTA */
.contact{padding-bottom:100px}
.contactBox{min-height:650px;background:var(--lime);color:#080808;padding:70px;display:flex;flex-direction:column;justify-content:space-between;position:relative;overflow:hidden}
.contactBox:after{content:"R4";position:absolute;right:-7%;bottom:-22%;font-family:var(--display);font-size:40vw;font-weight:700;letter-spacing:-.08em;line-height:.7;opacity:.07}
.contactBox h2{font-size:clamp(70px,10vw,145px);line-height:.77;letter-spacing:-.06em;margin:40px 0 0;max-width:950px;position:relative;z-index:1;font-weight:700}
.contactBottom{display:flex;justify-content:space-between;align-items:end;gap:40px;position:relative;z-index:2}
.contactBottom p{max-width:330px;font-size:14px;line-height:1.65}
.contactChoices{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end}
.dark{background:#080808;color:white;padding:15px 20px;border-radius:999px;font-family:var(--mono);font-size:11px;font-weight:500;transition:.25s;display:inline-block}
.dark:hover{background:white;color:#080808}

/* FOOTER */
footer{padding:40px 0 28px;border-top:1px solid var(--line);color:#555;font-family:var(--mono);font-size:10px}
.foot{display:flex;justify-content:space-between}
.socials{display:flex;gap:25px}.socials a:hover{color:white}

/* MOBILE */
@media(max-width:800px){
 .wrap{width:min(calc(100% - 28px),var(--max))}.links{display:none}.nav{height:58px}
 .hero{min-height:650px}.hero h1{font-size:19vw}.heroFoot{display:block;margin-top:45px}.scrollCue{display:none}
 .section{padding:110px 0}.statement{min-height:90vh}.statementMeta{display:block;line-height:2}
 .beatsIntro,.about{grid-template-columns:1fr;gap:30px}.beat{grid-template-columns:35px 1fr auto;gap:10px;min-height:105px}.beatName{font-size:24px}
 .processGrid{grid-template-columns:1fr}.step{border-right:0;border-bottom:1px solid var(--line);padding:34px 4px}.step:not(:last-child):after{content:"↓";top:auto;bottom:-14px;left:26px;right:auto;transform:rotate(0)}
 .serviceGrid{grid-template-columns:1fr}.service{border-right:0;border-bottom:1px solid var(--line);min-height:260px}
 .reviewRow{padding:28px 8px}
 .facts{grid-template-columns:1fr 1fr}.fact:nth-child(3){grid-column:span 2}
 .contactBox{min-height:auto;padding:32px}.contactBottom{display:block}.contactBox h2{font-size:19vw}
 .contactChoices{justify-content:flex-start;margin-top:22px}
 .foot{display:block}.socials{margin-top:18px}
}