:root{
    --maxw:1180px;
    --bg:#060709; --bg-2:#0d0f13; --card:#0a0c11; --fg:#eef3f6; --fg-dim:#7d8894;
    --line:#1a2028;
    --accent:#3d8bf5; --accent-deep:#1f5fd8; --ice:#86b4ff;
    --glow: rgba(61,139,245,.34);
    --btn-fg:#04222b;
    --invert-bg:#eef3f6; --invert-fg:#060709;
    --display:"Space Grotesk", sans-serif;
    --body:"Inter", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
    --radius:5px;
    --edge:0%; --logo-ar:1.352; --logo:url("/img/logo-mask.png");
  }
  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{margin:0; background:var(--bg); color:var(--fg); font-family:var(--body); line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:hidden;}

  /* faint animated background layers */
  #fx{position:fixed; inset:0; z-index:0; pointer-events:none;}
  .blob{position:fixed; z-index:0; pointer-events:none; filter:blur(90px); opacity:.20; border-radius:50%;}
  .blob.b1{width:52vw; height:52vw; left:-12vw; top:-14vw; background:radial-gradient(circle,var(--accent),transparent 66%); animation:drift1 34s ease-in-out infinite;}
  .blob.b2{width:44vw; height:44vw; right:-10vw; bottom:-12vw; background:radial-gradient(circle,var(--accent-deep),transparent 66%); animation:drift2 42s ease-in-out infinite;}
  @keyframes drift1{0%,100%{transform:translate(0,0) scale(1);}50%{transform:translate(6vw,4vw) scale(1.12);}}
  @keyframes drift2{0%,100%{transform:translate(0,0) scale(1);}50%{transform:translate(-5vw,-3vw) scale(1.08);}}
  .content{position:relative; z-index:1;}

  h1,h2,h3,.disp{font-family:var(--display); font-weight:600; line-height:1.03; margin:0; letter-spacing:-0.02em;}
  a{color:inherit; text-decoration:none;}
  .wrap{max-width:var(--maxw); margin:0 auto; padding:0 24px;}
  section{padding:100px 0;}
  .eyebrow{color:var(--accent); font-weight:600; font-size:.8rem; letter-spacing:.06em; margin:0 0 14px;}
  .lead{color:var(--fg-dim); font-size:1.06rem; max-width:56ch;}
  .ph{opacity:.55; font-style:italic;}

  /* buttons */
  .btn{position:relative; display:inline-flex; align-items:center; gap:10px; cursor:pointer;
    font-family:var(--body); font-weight:600; font-size:.97rem; padding:14px 26px; border-radius:var(--radius);
    background:var(--accent); color:var(--btn-fg); border:1px solid var(--accent);
    transition:transform .18s cubic-bezier(.2,.7,.2,1), box-shadow .25s ease, background .2s ease;}
  .btn:hover{transform:translateY(-2px); background:var(--ice); box-shadow:0 8px 30px var(--glow);}
  .btn:active{transform:translateY(0);}
  .btn.ghost{background:transparent; color:var(--fg); border:1px solid var(--line);}
  .btn.ghost:hover{color:var(--accent); border-color:var(--accent); background:rgba(61,139,245,.06); box-shadow:0 0 24px rgba(61,139,245,.14);}
  :focus-visible{outline:2px solid var(--accent); outline-offset:3px;}

  /* nav */
  header.nav{position:sticky; top:0; z-index:40; background:rgba(6,7,9,.72); backdrop-filter:blur(12px); border-bottom:1px solid var(--line);}
  .nav-in{display:flex; align-items:center; justify-content:space-between; height:72px;}
  .brand{font-family:var(--display); font-weight:600; font-size:1.34rem; letter-spacing:.01em;}
  .brand b{color:var(--accent);}
  .nav-links{display:flex; gap:28px; align-items:center;}
  .nav-links a{position:relative; font-size:.92rem; color:var(--fg-dim); font-weight:500; padding:4px 0;}
  .nav-links a:not(.pill)::after{content:""; position:absolute; left:0; bottom:-2px; height:2px; width:0; background:var(--accent); transition:width .25s ease; box-shadow:0 0 8px var(--glow);}
  .nav-links a:not(.pill):hover{color:var(--fg);}
  .nav-links a:not(.pill):hover::after{width:100%;}
  .nav-links a.pill{color:var(--btn-fg); background:var(--accent); padding:9px 17px; border-radius:var(--radius); font-weight:600; transition:box-shadow .25s ease, transform .18s ease;}
  .nav-links a.pill:hover{transform:translateY(-2px); box-shadow:0 6px 22px var(--glow);}
  .menu-btn{display:none; background:none; border:0; color:var(--fg); font-size:1.3rem; cursor:pointer;}

  /* hero */
  .hero{position:relative; padding:80px 0 100px; overflow:hidden;}
  .hero-glow{position:absolute; width:640px; height:640px; border-radius:50%; pointer-events:none;
    background:radial-gradient(circle, rgba(61,139,245,.16), transparent 60%); transform:translate(-50%,-50%);
    left:60%; top:32%; will-change:left,top; z-index:0;}
  .hero .wrap{position:relative; z-index:1;}
  .hero h1{font-size:clamp(3.1rem,10.5vw,8rem); letter-spacing:-0.035em;}
  .hero h1 .ice{color:var(--ice); text-shadow:0 0 44px rgba(61,139,245,.35);}
  .hero .tag{font-size:clamp(1.05rem,2.3vw,1.38rem); color:var(--fg-dim); margin:24px 0 36px; max-width:44ch;}
  .hero-cta{display:flex; gap:14px; flex-wrap:wrap;}
  .reveal{opacity:0; transform:translateY(16px); animation:rise .9s cubic-bezier(.2,.7,.2,1) forwards;}
  .reveal.d1{animation-delay:.08s;} .reveal.d2{animation-delay:.2s;} .reveal.d3{animation-delay:.32s;}
  @keyframes rise{to{opacity:1; transform:none;}}

  /* stats */
  .stats{background:var(--invert-bg); color:var(--invert-fg); padding:54px 0;}
  .stats .row{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; text-align:center;}
  .stats .n{font-family:var(--display); font-weight:600; font-size:clamp(1.6rem,5vw,3.2rem); line-height:1;}
  .stats .k{font-size:.85rem; opacity:.66; margin-top:8px; letter-spacing:.02em;}

  /* section heads */
  .head{display:flex; justify-content:space-between; align-items:flex-end; gap:24px; margin-bottom:46px; flex-wrap:wrap;}
  .head h2{font-size:clamp(2rem,5vw,3.1rem);}

  /* shows */
  .shows{display:grid; grid-template-columns:repeat(3,1fr); gap:22px;}
  .show{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; display:flex; flex-direction:column;
    transition:transform .2s cubic-bezier(.2,.7,.2,1), border-color .25s ease, box-shadow .3s ease;}
  .show:hover{transform:translateY(-6px); border-color:var(--accent); box-shadow:0 16px 44px rgba(0,0,0,.5), 0 0 26px rgba(61,139,245,.1);}
  .show .flyer{position:relative; aspect-ratio:4/5; overflow:hidden; background:linear-gradient(150deg,#12161c,#1d242d); display:flex; align-items:flex-end; padding:16px;}
  .show .flyer::before{content:""; position:absolute; inset:0; background:radial-gradient(120% 90% at 70% 10%, rgba(61,139,245,.16), transparent 55%); opacity:0; transition:opacity .3s ease;}
  .show:hover .flyer::before{opacity:1;}
  .show .flyer .date{position:relative; background:var(--bg); color:var(--fg); font-weight:700; font-size:.78rem; padding:6px 11px; border-radius:6px;}
  .show .body{padding:20px; display:flex; flex-direction:column; gap:6px; flex:1;}
  .show .body h3{font-size:1.3rem;}
  .show .meta{color:var(--fg-dim); font-size:.9rem;}
  .show .body .btn{margin-top:16px; width:100%; justify-content:center;}

  /* about */
  .about-grid{display:grid; grid-template-columns:1.1fr .9fr; gap:56px; align-items:center;}
  .about-grid h2{font-size:clamp(2rem,5vw,3.2rem); margin-bottom:20px;}
  .about-grid p{color:var(--fg-dim); margin:0 0 16px;}
  .about-art{position:relative; aspect-ratio:1/1; border-radius:var(--radius); border:1px solid var(--line); overflow:hidden;
    background:linear-gradient(160deg,#0e1319,#161d25);}
  .about-art::after{content:""; position:absolute; inset:0; background:conic-gradient(from 210deg at 62% 38%, rgba(61,139,245,.22), transparent 40%, rgba(31,95,216,.18), transparent 75%); mix-blend-mode:screen; animation:spin 40s linear infinite;}
  @keyframes spin{to{transform:rotate(360deg);}}

  /* gallery */
  .gal{display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:180px; gap:14px;}
  .gal .tile{position:relative; border-radius:var(--radius); border:1px solid var(--line); overflow:hidden; background:linear-gradient(135deg,var(--bg-2),var(--card)); display:flex; align-items:center; justify-content:center; color:var(--fg-dim); font-size:.8rem;
    transition:transform .25s ease, border-color .25s ease;}
  .gal .tile::before{content:""; position:absolute; inset:0; background:linear-gradient(120deg,transparent 30%, rgba(61,139,245,.14) 50%, transparent 70%); transform:translateX(-120%); transition:transform .6s ease;}
  .gal .tile:hover{transform:scale(1.02); border-color:var(--accent);}
  .gal .tile:hover::before{transform:translateX(120%);}
  .gal .tile.tall{grid-row:span 2;} .gal .tile.wide{grid-column:span 2;}

  /* job board */
  .jobs-grid{display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:start;}
  .roles{display:flex; flex-direction:column; gap:14px;}
  .role{border:1px solid var(--line); border-radius:var(--radius); padding:20px 22px; background:var(--card);
    transition:border-color .25s ease, transform .18s ease, box-shadow .3s ease;}
  .role:hover{border-color:var(--accent); transform:translateX(4px); box-shadow:-4px 0 0 var(--accent), 0 0 24px rgba(61,139,245,.08);}
  .role .rt{display:flex; justify-content:space-between; align-items:center; gap:12px;}
  .role h3{font-size:1.18rem;}
  .role .tag{font-size:.7rem; font-weight:600; color:var(--accent); border:1px solid var(--accent); border-radius:999px; padding:4px 11px; white-space:nowrap;}
  .role p{color:var(--fg-dim); font-size:.92rem; margin:10px 0 0;}
  .role .apply{margin-top:14px; font-weight:600; color:var(--accent); font-size:.9rem; cursor:pointer; background:none; border:0; padding:0; font-family:var(--body); transition:letter-spacing .2s ease;}
  .role .apply:hover{letter-spacing:.02em;}

  .formcard{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:30px;}
  .formcard h3{font-size:1.4rem; margin-bottom:6px;}
  .formcard .sub{color:var(--fg-dim); font-size:.92rem; margin-bottom:22px;}
  .field{margin-bottom:16px;}
  .field label{display:block; font-size:.83rem; font-weight:600; margin-bottom:7px;}
  .field input,.field select,.field textarea{width:100%; background:var(--bg-2); color:var(--fg); border:1px solid var(--line); border-radius:var(--radius); padding:12px 14px; font-family:var(--body); font-size:.95rem; transition:border-color .2s ease, box-shadow .2s ease;}
  .field input:focus,.field select:focus,.field textarea:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(61,139,245,.16);}
  .field textarea{min-height:110px; resize:vertical;}
  .row2{display:grid; grid-template-columns:1fr 1fr; gap:16px;}
  .success{display:none; padding:20px; border-radius:var(--radius); background:rgba(61,139,245,.1); border:1px solid var(--accent); color:var(--fg);}
  .success.show{display:block;}

  /* ambassador */
  .amb{background:var(--bg-2);}
  .amb-grid{display:grid; grid-template-columns:1fr 1fr; gap:44px; align-items:start;}
  .perks{list-style:none; padding:0; margin:26px 0 0;}
  .perks li{padding:14px 0; border-top:1px solid var(--line); display:flex; gap:14px; align-items:flex-start; transition:padding-left .2s ease;}
  .perks li:hover{padding-left:6px;}
  .perks li::before{content:""; width:9px; height:9px; margin-top:8px; border-radius:2px; background:var(--accent); flex:none; box-shadow:0 0 10px var(--glow);}
  .perks li b{display:block; font-family:var(--display); font-weight:600; font-size:1.04rem;}
  .perks li span{color:var(--fg-dim); font-size:.92rem;}

  /* discord */
  .discord{position:relative; background:var(--invert-bg); color:var(--invert-fg); text-align:center; overflow:hidden;}
  .discord h2{font-size:clamp(2rem,6vw,3.6rem); margin-bottom:14px;}
  .discord p{max-width:50ch; margin:0 auto 28px; opacity:.72;}
  .discord .btn{background:var(--invert-fg); color:var(--invert-bg); border-color:var(--invert-fg);}
  .discord .btn:hover{background:#12161c; box-shadow:0 8px 30px rgba(0,0,0,.25);}

  /* partners */
  .partners{text-align:center;}
  .plogos{display:flex; flex-wrap:wrap; gap:18px; justify-content:center; margin-top:30px;}
  .plogo{width:150px; height:64px; border:1px dashed var(--line); border-radius:var(--radius); display:flex; align-items:center; justify-content:center; color:var(--fg-dim); font-size:.78rem; transition:border-color .25s ease, color .25s ease;}
  .plogo:hover{border-color:var(--accent); color:var(--accent);}

  /* newsletter */
  .news{border-top:1px solid var(--line);}
  .news-in{display:flex; justify-content:space-between; align-items:center; gap:30px; flex-wrap:wrap;}
  .news h2{font-size:clamp(1.6rem,4vw,2.4rem);}
  .news form{display:flex; gap:10px; flex:1; min-width:280px; max-width:440px;}
  .news input{flex:1; background:var(--bg-2); border:1px solid var(--line); border-radius:var(--radius); padding:13px 15px; color:var(--fg); font-family:var(--body);}
  .news input:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(61,139,245,.16);}

  /* footer */
  footer{border-top:1px solid var(--line); padding:44px 0;}
  .foot-in{display:flex; justify-content:space-between; gap:24px; flex-wrap:wrap; align-items:center;}
  .foot-links{display:flex; gap:20px; flex-wrap:wrap;}
  .foot-links a{color:var(--fg-dim); font-size:.9rem; transition:color .2s ease;}
  .foot-links a:hover{color:var(--accent);}
  .copy{color:var(--fg-dim); font-size:.84rem;}

  @media(max-width:900px){
    .nav-links{display:none;} .menu-btn{display:block;}
    .shows{grid-template-columns:1fr 1fr;}
    .about-grid,.jobs-grid,.amb-grid{grid-template-columns:1fr; gap:32px;}
    .gal{grid-template-columns:repeat(2,1fr);}
    .stats .row{grid-template-columns:repeat(3,1fr); gap:22px 12px;}
  }
  @media(max-width:560px){
    section{padding:68px 0;}
    .shows{grid-template-columns:1fr;} .row2{grid-template-columns:1fr;}
  }
  @media(prefers-reduced-motion:reduce){
    *{transition:none !important; animation:none !important; scroll-behavior:auto !important;}
    .reveal{opacity:1; transform:none;}
    #fx{display:none;}
  }
  /* brand logo, scroll-driven glacial reveal */
  .logomask{ -webkit-mask:var(--logo) center/contain no-repeat; mask:var(--logo) center/contain no-repeat;
    background:linear-gradient(135deg, var(--accent) 0%, var(--accent) calc(var(--edge) - 12%), #ffffff calc(var(--edge) + 4%), #ffffff 100%); }
  .logo-nav{ display:block; height:38px; width:calc(38px * var(--logo-ar)); }
  .hero-logo{ width:min(560px,84vw); height:calc(min(560px,84vw) / var(--logo-ar)); margin:0 0 30px; }
  /* live counter dot */
  .stats .live{ display:inline-block; width:7px; height:7px; border-radius:50%; background:#3d8bf5; margin-left:6px; vertical-align:middle; animation:pulse 2s infinite; }
  @keyframes pulse{0%{box-shadow:0 0 0 0 rgba(61,139,245,.5);}70%{box-shadow:0 0 0 7px rgba(61,139,245,0);}100%{box-shadow:0 0 0 0 rgba(61,139,245,0);}}
  /* services / packages */
  .pkgs{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
  .pkg{ position:relative; background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:28px 26px; display:flex; flex-direction:column; transition:border-color .25s ease, transform .18s ease, box-shadow .3s ease; }
  .pkg:hover{ border-color:var(--accent); transform:translateY(-4px); box-shadow:0 14px 40px rgba(0,0,0,.45), 0 0 24px rgba(61,139,245,.08); }
  .pkg.feat{ border-color:var(--accent); }
  .pkg .badge{ position:absolute; top:-11px; left:26px; background:var(--accent); color:var(--btn-fg); font-size:.68rem; font-weight:700; letter-spacing:.04em; padding:4px 11px; border-radius:999px; }
  .pkg h3{ font-size:1.34rem; }
  .pkg .price{ font-family:var(--display); font-weight:600; font-size:1.6rem; margin:10px 0 4px; }
  .pkg .price small{ font-size:.8rem; color:var(--fg-dim); font-weight:500; font-family:var(--body); }
  .pkg ul{ list-style:none; padding:0; margin:18px 0 24px; display:flex; flex-direction:column; gap:11px; flex:1; }
  .pkg ul li{ position:relative; padding-left:22px; color:var(--fg-dim); font-size:.92rem; }
  .pkg ul li::before{ content:"\2192"; position:absolute; left:0; color:var(--accent); }
  @media(max-width:900px){ .pkgs{ grid-template-columns:1fr; } }
  /* nav-right + socials */
  .nav-right{ display:flex; align-items:center; gap:16px; }
  .socials{ display:flex; gap:12px; }
  .socials a{ color:var(--fg-dim); display:inline-flex; transition:color .2s ease, transform .18s ease; }
  .socials a:hover{ color:var(--accent); transform:translateY(-2px); }
  /* nav dropdown */
  .has-drop{ position:relative; }
  .drop-toggle{ display:inline-flex; align-items:center; gap:5px; background:none; border:0; color:var(--fg-dim); font-family:var(--body); font-size:.92rem; font-weight:500; cursor:pointer; padding:4px 0; }
  .drop-toggle .caret{ font-size:.7rem; transition:transform .2s ease; }
  .has-drop:hover .drop-toggle,.has-drop.open .drop-toggle{ color:var(--fg); }
  .has-drop.open .drop-toggle .caret{ transform:rotate(180deg); }
  .drop{ position:absolute; top:100%; left:50%; transform:translateX(-50%) translateY(-6px); margin-top:8px; background:var(--bg-2); border:1px solid var(--line); border-radius:var(--radius); padding:8px; min-width:196px; display:flex; flex-direction:column; opacity:0; visibility:hidden; transition:opacity .2s ease, transform .2s ease; box-shadow:0 16px 40px rgba(0,0,0,.5); z-index:60; }
  .has-drop:hover .drop,.has-drop.open .drop{ opacity:1; visibility:visible; transform:translateX(-50%) translateY(0); }
  .has-drop::after{ content:""; position:absolute; top:100%; left:0; right:0; height:14px; }
  .drop a{ padding:9px 12px; border-radius:6px; color:var(--fg-dim); font-size:.9rem; }
  .drop a:hover{ background:rgba(61,139,245,.08); color:var(--accent); }
  /* movement heading */
  .stats .movement{ font-family:var(--display); font-weight:600; text-transform:uppercase; letter-spacing:.08em; text-align:center; font-size:clamp(.95rem,2.4vw,1.15rem); margin:0 0 26px; color:var(--invert-fg); opacity:.82; }
  /* footer logo */
  .logo-foot{ display:block; height:32px; width:calc(32px * var(--logo-ar)); }
  /* artists roster */
  .artists{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
  .artist{ background:var(--card); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; transition:border-color .25s ease, transform .18s ease, box-shadow .3s ease; }
  .artist:hover{ border-color:var(--accent); transform:translateY(-5px); box-shadow:0 16px 44px rgba(0,0,0,.5), 0 0 24px rgba(61,139,245,.08); }
  .artist .media{ position:relative; aspect-ratio:1/1; background:linear-gradient(150deg,#12161c,#1d242d); display:flex; align-items:center; justify-content:center; color:var(--fg-dim); font-size:.82rem; }
  .artist .media::after{ content:"\25B6"; position:absolute; width:46px; height:46px; display:flex; align-items:center; justify-content:center; border-radius:50%; border:1px solid rgba(255,255,255,.25); color:#fff; font-size:.75rem; padding-left:3px; opacity:.7; transition:opacity .2s ease, background .2s ease; }
  .artist:hover .media::after{ opacity:1; background:rgba(61,139,245,.22); }
  .artist .media video.hovervid{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity .3s ease; z-index:2; pointer-events:none; }
  .artist:hover .media video.hovervid[data-ready="1"]{ opacity:1; }
  .artist:hover .media.hasvid::after{ opacity:0; }
  .abody{ padding:20px; }
  .abody h3{ font-size:1.3rem; }
  .abody .role{ color:var(--fg-dim); font-size:.9rem; margin:4px 0 0; }
  .alinks{ display:flex; gap:8px; flex-wrap:wrap; margin-top:14px; }
  .alinks.music{ margin-top:8px; }
  .chip{ width:36px; height:36px; display:inline-flex; align-items:center; justify-content:center; padding:0; border:1px solid var(--line); border-radius:50%; color:var(--fg-dim); transition:color .2s ease, border-color .2s ease, transform .18s ease; }
  .chip svg{ width:18px; height:18px; }
  .chip:hover{ color:var(--accent); border-color:var(--accent); transform:translateY(-2px); }
  .chip.ig:hover{ color:#E1306C; border-color:#E1306C; }
  .chip.tt:hover{ color:#69C9D0; border-color:#69C9D0; }
  .chip.yt:hover{ color:#FF0000; border-color:#FF0000; }
  .chip.sp:hover{ border-color:#1DB954; color:#1DB954; }
  .chip.bp:hover{ border-color:#01ff95; color:#01ff95; }
  .chip.bp .bpico{ width:18px; height:18px; display:block; background:currentColor; -webkit-mask:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADgAAABECAYAAADUZvakAAAB20lEQVR42u2ay5GDMAyGBbP1eKuI05CoYmkIqGLTkPeyBw6eWA9LwYw040uGGD7LkqwfplIK3NlmuLkFYAAG4P0AEQDKm4HhwQAMwAAMwAAMwAAMwAAMwAAMwAAcEfBxJcDJQBdtTfgNAK9RPUiRI14je7A12Q4Az1FjkOK9Y9QYRAD4odzPG/DLEW6p/Jas41TrQSrc2Xvp9J9MWJBVlxVKkQ4sdMNSSipyQ+lzesFtRW/oBciB6wGmAuXGICfmLI18GpqN4BZjwN83GVgE6AG3m0AaxBwyrk2V+yXmHKokw4UD4rWpY0JLUkAJHGpXvDI2zZw9DtvnDuFhEJ/PRnxmTQxyPWJyGiGcgpKm0CMRrrUYoBybZPEoW3StbC1u49qjLh4SHYgag2dI965cWCfZ/eDaaF8+qablXpLFekUIL01GFCPW23ckZfshWdzZKQlk6un/ylu01Z9p+kgUL26HAsw5N6KRgtBdk5EeqbiQqJ2vNyAQdRhsPFhi6DldNRmKpf9um5qYjkqmpCaUpVmbDTzI7SVN1TULD3opcJN3maB0Ib3qLf0ljtEWtdqubMnDA7AXpJt07w2qkTpMk0yrlORTaciV0rH3eE/4KUA3iw+BAjAAA9DU/gAWBX7130YcpQAAAABJRU5ErkJggg==) center/contain no-repeat; mask:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADgAAABECAYAAADUZvakAAAB20lEQVR42u2ay5GDMAyGBbP1eKuI05CoYmkIqGLTkPeyBw6eWA9LwYw040uGGD7LkqwfplIK3NlmuLkFYAAG4P0AEQDKm4HhwQAMwAAMwAAMwAAMwAAMwAAMwAAcEfBxJcDJQBdtTfgNAK9RPUiRI14je7A12Q4Az1FjkOK9Y9QYRAD4odzPG/DLEW6p/Jas41TrQSrc2Xvp9J9MWJBVlxVKkQ4sdMNSSipyQ+lzesFtRW/oBciB6wGmAuXGICfmLI18GpqN4BZjwN83GVgE6AG3m0AaxBwyrk2V+yXmHKokw4UD4rWpY0JLUkAJHGpXvDI2zZw9DtvnDuFhEJ/PRnxmTQxyPWJyGiGcgpKm0CMRrrUYoBybZPEoW3StbC1u49qjLh4SHYgag2dI965cWCfZ/eDaaF8+qablXpLFekUIL01GFCPW23ckZfshWdzZKQlk6un/ylu01Z9p+kgUL26HAsw5N6KRgtBdk5EeqbiQqJ2vNyAQdRhsPFhi6DldNRmKpf9um5qYjkqmpCaUpVmbDTzI7SVN1TULD3opcJN3maB0Ib3qLf0ljtEWtdqubMnDA7AXpJt07w2qkTpMk0yrlORTaciV0rH3eE/4KUA3iw+BAjAAA9DU/gAWBX7130YcpQAAAABJRU5ErkJggg==) center/contain no-repeat; }
  .chip.sc:hover{ border-color:#ff5500; color:#ff5500; }
  /* mobile nav */
  @media(max-width:600px){ .socials{ gap:9px; } .socials svg{ width:17px; height:17px; } }
  @media(max-width:900px){
    .nav-links{ display:none; position:absolute; top:72px; left:0; right:0; background:var(--bg); border-bottom:1px solid var(--line); flex-direction:column; align-items:flex-start; gap:0; padding:12px 24px 22px; }
    header.nav.open .nav-links{ display:flex; }
    .nav-links > a,.drop-toggle{ padding:12px 0; width:100%; text-align:left; }
    .has-drop{ width:100%; }
    .drop{ position:static; opacity:1; visibility:visible; transform:none; margin:0 0 6px; padding:0 0 0 14px; background:transparent; border:0; box-shadow:none; }
    .artists,.pkgs{ grid-template-columns:1fr; }
  }
  /* logo-style display headings (Michroma = wide techno match) */
  .logo-type{ font-family:"Michroma", var(--display); text-transform:uppercase; letter-spacing:.02em; line-height:1.15; }
  h2.logo-type{ font-size:clamp(1.5rem,3.6vw,2.3rem); }
  h3.logo-type{ font-size:1.2rem; }
  .hero h1.logo-type{ font-size:clamp(1.85rem,5.8vw,4.1rem); line-height:1.18; letter-spacing:.015em; }
  /* centered hero */
  .hero .wrap{ text-align:center; }
  .hero-logo{ margin-left:auto; margin-right:auto; }
  .hero .tag{ margin-left:auto; margin-right:auto; }
  .hero-cta{ justify-content:center; }
  /* booking / talent buying */
  .whofor{ display:flex; flex-wrap:wrap; gap:8px; margin-top:22px; }
  .tagpill{ font-size:.8rem; font-weight:600; padding:6px 13px; border:1px solid var(--line); border-radius:999px; color:var(--fg-dim); }
  .howto{ list-style:none; counter-reset:step; padding:0; margin:24px 0 0; display:flex; flex-direction:column; gap:16px; }
  .howto li{ position:relative; padding-left:46px; color:var(--fg-dim); font-size:.94rem; counter-increment:step; }
  .howto li b{ color:var(--fg); display:block; font-weight:600; margin-bottom:2px; }
  .howto li::before{ content:counter(step); position:absolute; left:0; top:-2px; width:30px; height:30px; display:flex; align-items:center; justify-content:center; border-radius:50%; background:rgba(61,139,245,.12); border:1px solid var(--accent); color:var(--accent); font-family:var(--display); font-weight:600; font-size:.9rem; }
  /* artist genre tabs + richer cards */
  .genre-tabs{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:30px; }
  .gtab{ font-family:var(--body); font-weight:600; font-size:.92rem; padding:9px 18px; border-radius:999px; border:1px solid var(--line); background:transparent; color:var(--fg-dim); cursor:pointer; transition:color .2s ease, border-color .2s ease, background .2s ease; }
  .gtab:hover{ color:var(--fg); border-color:var(--accent); }
  .gtab.active{ background:var(--accent); color:var(--btn-fg); border-color:var(--accent); }
  .gtab.soon{ opacity:.45; cursor:not-allowed; }
  .gtab.soon span{ font-size:.66rem; text-transform:uppercase; letter-spacing:.06em; margin-left:5px; }
  .wtabs{ display:flex; gap:8px; flex-wrap:wrap; margin:2px 0 20px; }
  .wform[hidden]{ display:none; }
  .artist .exp{ color:var(--fg-dim); font-size:.85rem; margin:8px 0 0; }
  .chip.am:hover{ border-color:#fa57c1; color:#fa57c1; }
  .book-artist{ width:100%; justify-content:center; margin-top:16px; }
  .artist .exp.ph{ display:none; }
  /* big footer wordmark from the real logo lettering (EDM white, OHIO glacial blue) */
  .foot-mark{ display:inline-block; width:clamp(230px,44vw,620px); aspect-ratio:9.7982; max-width:100%;
    -webkit-mask:url("/img/wordmark-mask.png") left center/contain no-repeat; mask:url("/img/wordmark-mask.png") left center/contain no-repeat;
    background:linear-gradient(90deg, #ffffff 0 48.2%, var(--accent) 48.2% 100%); }
  .pkg .quote{ font-family:var(--display); font-weight:600; color:var(--accent); font-size:1.15rem; margin:10px 0 4px; }
  .citymap{ display:flex; justify-content:space-between; align-items:center; gap:14px; max-width:100%; margin:-32px auto 40px; }
  .citymap span{ font-family:var(--display); font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--invert-fg); font-size:clamp(.82rem,3.4vw,1.5rem); line-height:1; white-space:nowrap; }
  .citymap .co{ text-align:center; }
  /* sticky mobile Get-tickets bar */
  .ticket-bar{ position:fixed; left:0; right:0; bottom:0; z-index:45; display:none; text-align:center; padding:15px 16px; background:var(--accent); color:var(--btn-fg); font-family:var(--body); font-weight:700; text-transform:uppercase; letter-spacing:.04em; font-size:.98rem; box-shadow:0 -6px 26px rgba(0,0,0,.45); transform:translateY(100%); transition:transform .3s ease; }
  @media(max-width:900px){ .ticket-bar{ display:block; } body.scrolled .ticket-bar{ transform:translateY(0); } footer{ padding-bottom:84px; } }
  /* legal modals */
  .legal-link{ background:none; border:0; margin:0; padding:0; font-family:inherit; font-size:inherit; vertical-align:baseline; color:var(--accent); cursor:pointer; text-decoration:underline; text-underline-offset:2px; }
  .legal-link:hover{ opacity:.78; }
  .copy .legal-link{ background:none; border:0; color:var(--fg-dim); font-size:.84rem; cursor:pointer; font-family:var(--body); padding:0; }
  .copy .legal-link:hover{ color:var(--accent); text-decoration:underline; }
  .modal{ position:fixed; inset:0; z-index:200; display:none; align-items:center; justify-content:center; padding:20px; background:rgba(0,0,0,.72); backdrop-filter:blur(4px); }
  .modal.open{ display:flex; }
  .modal-box{ position:relative; background:var(--bg-2); border:1px solid var(--line); border-radius:var(--radius); max-width:760px; width:100%; max-height:85vh; overflow-y:auto; padding:36px 34px; }
  .modal-box h2{ font-size:1.7rem; margin-bottom:4px; }
  .modal-box .updated{ color:var(--fg-dim); font-size:.8rem; margin:0 0 20px; }
  .modal-box h3{ font-family:var(--display); font-weight:600; font-size:1.05rem; color:var(--fg); margin:22px 0 8px; }
  .modal-box p, .modal-box li{ color:var(--fg-dim); font-size:.92rem; line-height:1.7; margin:0 0 10px; }
  .modal-box ul{ margin:0 0 10px; padding-left:20px; }
  .modal-box b{ color:var(--fg); }
  .modal-box a{ color:var(--accent); }
  .modal-close{ position:absolute; top:14px; right:16px; background:none; border:0; color:var(--fg); font-size:1.6rem; line-height:1; cursor:pointer; }
  /* newsletter capture */
  .news form{ flex-direction:column; align-items:stretch; gap:12px; max-width:460px; }
  .news-fields{ display:flex; gap:10px; flex-wrap:wrap; }
  .news-fields input{ flex:1; min-width:150px; }
  .news .consent{ display:flex; gap:9px; align-items:flex-start; font-size:.79rem; color:var(--fg-dim); line-height:1.45; cursor:pointer; }
  .news .consent input{ margin-top:2px; flex:none; width:16px; height:16px; accent-color:var(--accent); }
  .news-success{ display:none; color:var(--accent); font-size:.9rem; font-weight:600; margin:0; }
  .news-success.show{ display:block; }
  /* show city filters */
  .city-filters{ display:flex; gap:10px; flex-wrap:wrap; justify-content:center; margin-top:34px; }
  .city-filter{ font-family:var(--body); font-weight:600; font-size:.88rem; padding:9px 18px; border-radius:999px; border:1px solid var(--line); background:transparent; color:var(--fg-dim); cursor:pointer; transition:color .2s ease, border-color .2s ease, background .2s ease; }
  .city-filter:hover{ color:var(--fg); border-color:var(--accent); }
  .city-filter.active{ background:var(--accent); color:var(--btn-fg); border-color:var(--accent); }
  /* see all artists */
  #artists.showall .genre-tabs{ display:none; }
  #artists.showall .artists[data-panel]{ display:grid !important; margin-bottom:22px; }
  /* slim social-proof strip at top of hero */
  .hero .proof{ display:flex; flex-wrap:wrap; justify-content:center; gap:8px 22px; margin:0 0 26px; font-size:.8rem; color:var(--fg-dim); letter-spacing:.02em; }
  .hero .proof span{ display:inline-flex; align-items:center; gap:6px; }
  .hero .proof b{ color:var(--fg); font-family:var(--display); font-weight:600; font-size:.92rem; }
  .hero .proof .live{ display:inline-block; width:6px; height:6px; border-radius:50%; background:#3d8bf5; animation:pulse 2s infinite; }
  /* full-width white proof band under the nav */
  .proofband{ background:var(--invert-bg); color:var(--invert-fg); padding:24px 0 26px; }
  .proofband .movement{ font-family:var(--display); font-weight:600; text-transform:uppercase; letter-spacing:.1em; text-align:center; font-size:clamp(.82rem,2vw,1rem); margin:0 0 14px; opacity:.85; }
  .proofband .prow{ display:flex; flex-wrap:wrap; justify-content:center; gap:10px 40px; }
  .proofband .prow .pstat{ display:flex; align-items:baseline; gap:8px; font-size:.82rem; opacity:.78; color:inherit; text-decoration:none; transition:opacity .2s ease; }
  .proofband .prow a.pstat:hover{ opacity:1; }
  .proofband .prow .pstat > span{ display:inline-flex; align-items:center; gap:5px; }
  .proofband .prow .pstat svg{ width:14px; height:14px; }
  .proofband .prow b{ font-family:var(--display); font-weight:600; font-size:clamp(1.3rem,3vw,1.85rem); line-height:1; }
  .proofband .prow .live{ display:inline-block; width:6px; height:6px; border-radius:50%; background:#3d8bf5; animation:pulse 2s infinite; margin-left:4px; }
  .artists .empty-genre{ grid-column:1/-1; text-align:center; color:var(--fg-dim); font-size:.92rem; padding:26px 0; margin:0; }
  /* jobs role carousel */
  .role-page{ display:flex; flex-direction:column; gap:14px; }
  .role-page[hidden]{ display:none; }
  .role-dots{ display:flex; gap:9px; justify-content:center; margin-top:4px; }
  .role-dot{ width:8px; height:8px; border-radius:50%; border:0; background:var(--line); cursor:pointer; padding:0; transition:background .2s ease, transform .2s ease; }
  .role-dot:hover{ background:var(--fg-dim); }
  .role-dot.active{ background:var(--accent); transform:scale(1.25); }
  .artists[data-panel="house"]{ grid-template-columns:repeat(4,1fr); }
  @media(max-width:1024px){ .artists[data-panel="house"]{ grid-template-columns:repeat(2,1fr); } }
  @media(max-width:560px){ .artists[data-panel="house"]{ grid-template-columns:1fr; } }
  .plogo.real{ border:0; background:transparent; }
  .plogo img{ max-height:46px; max-width:100%; width:auto; height:auto; object-fit:contain; transition:transform .2s ease, filter .2s ease; }
  .plogo.real{ cursor:pointer; }
  .plogo.real:hover img{ transform:scale(1.06); filter:brightness(1.15); }
  .plogo.real.big img{ max-height:60px; }
  .plogos{ flex-direction:column; align-items:center; }
  .plogo-row{ display:grid; align-items:center; justify-items:center; column-gap:30px; margin:0 auto; }
  .plogo.real{ width:100%; height:72px; padding:0; display:flex; align-items:center; justify-content:center; }
  @media(max-width:640px){ .plogo-row{ column-gap:16px; } }

/* =====================================================================
   v100: multi-page additions + mobile layer
   ===================================================================== */
[hidden]{ display:none !important; }

/* current page in the nav */
.nav-links a[aria-current="page"], .has-drop.is-current .drop-toggle{ color:var(--fg); }
.nav-links a[aria-current="page"]:not(.pill)::after{ width:100%; }
.drop a[aria-current="page"]{ color:var(--accent); }

/* hamburger icon */
.menu-btn{ width:44px; height:44px; padding:0; flex-direction:column; align-items:center; justify-content:center; gap:5px; }
.menu-btn span{ display:block; width:22px; height:2px; border-radius:2px; background:var(--fg); transition:transform .25s ease, opacity .2s ease; }
header.nav.open .menu-btn span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
header.nav.open .menu-btn span:nth-child(2){ opacity:0; }
header.nav.open .menu-btn span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* page titles on inner pages */
main > section:first-child{ padding-top:72px; }
h1.logo-type.page-title{ font-size:clamp(1.8rem,5vw,2.9rem); margin:0; }
.head h1.page-title + *{ margin-top:0; }

/* shows */
.city-filters.top{ justify-content:flex-start; margin:0 0 26px; }
.shows-empty{ color:var(--fg-dim); grid-column:1 / -1; margin:0; }
.shows-empty a{ color:var(--accent); }
.show .meta.lineup{ color:var(--fg); font-weight:500; }
.show .btn[aria-disabled="true"]{ opacity:.6; cursor:default; transform:none; box-shadow:none; }

/* home: roster teaser */
.rgrid{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:18px; }
.rcard{ display:flex; flex-direction:column; gap:4px; color:var(--fg); }
.rcard .rimg{ display:block; aspect-ratio:4/5; max-width:100%; border-radius:var(--radius); border:1px solid var(--line); background:var(--bg-2) center top/cover no-repeat;
  transition:border-color .25s ease, transform .2s ease, box-shadow .3s ease; margin-bottom:10px; }
.rcard:hover .rimg{ border-color:var(--accent); transform:translateY(-4px); box-shadow:0 14px 40px rgba(0,0,0,.45), 0 0 24px rgba(61,139,245,.08); }
.rcard .rname{ font-family:var(--display); font-weight:600; font-size:1.15rem; }
.rcard .rgenre{ color:var(--fg-dim); font-size:.86rem; }

/* home: get involved hub */
.hub{ background:var(--bg-2); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.hgrid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.htile{ display:flex; flex-direction:column; gap:8px; padding:24px 22px; border:1px solid var(--line); border-radius:var(--radius); background:var(--card); color:var(--fg);
  transition:border-color .25s ease, transform .18s ease, box-shadow .3s ease; }
.htile:hover{ border-color:var(--accent); transform:translateY(-3px); box-shadow:0 0 24px rgba(61,139,245,.10); }
.htile b{ font-family:var(--display); font-weight:600; font-size:1.2rem; }
.htile span{ color:var(--fg-dim); font-size:.92rem; flex:1; }
.htile i{ font-style:normal; color:var(--accent); font-weight:600; font-size:.9rem; margin-top:6px; }

/* artists page: booking call-to-action */
.cta-band{ padding:56px 0; background:var(--bg-2); border-top:1px solid var(--line); }
.cta-band .wrap{ display:flex; justify-content:space-between; align-items:center; gap:24px; flex-wrap:wrap; }
.cta-band h2{ font-size:clamp(1.3rem,3vw,1.9rem); max-width:22ch; }

/* about: two real photos */
.gal.gal-2{ grid-template-columns:repeat(2,minmax(0,1fr)); grid-auto-rows:240px; }
#moments{ padding-top:0; }

/* ---------------------------------------------------------------------
   Mobile layer: phones and small tablets
   --------------------------------------------------------------------- */
@media (max-width:900px){
  .nav-in{ height:64px; }
  .menu-btn{ display:flex; }
  .nav-links{ top:64px; height:calc(100vh - 64px); height:calc(100dvh - 64px); overflow-y:auto; padding:6px 20px 28px; box-shadow:0 24px 48px rgba(0,0,0,.6); }
  .nav-links > a, .drop-toggle{ font-size:1.08rem; padding:15px 0; border-bottom:1px solid var(--line); color:var(--fg); }
  .nav-links a:not(.pill)::after{ display:none; }
  .drop{ padding:4px 0 8px 14px; }
  .drop a{ font-size:1rem; padding:12px 0; }
  .drop-toggle .caret{ display:none; }
  body.menu-open{ overflow:hidden; }
  /* 16px+ text in fields stops iPhones from zooming in when you tap them */
  input, select, textarea{ font-size:16px !important; }
  .rgrid{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
  .hgrid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:600px){
  .wrap{ padding-left:max(18px, env(safe-area-inset-left, 0px)); padding-right:max(18px, env(safe-area-inset-right, 0px)); }
  section{ padding:56px 0; }
  main > section:first-child{ padding-top:40px; }
  .head{ margin-bottom:24px; gap:14px; }
  .head h2{ font-size:clamp(1.45rem,7vw,2rem); }
  .nav-right .socials{ display:none; }
  .nav-right .pill{ padding:8px 13px; font-size:.84rem; }
  .logo-nav{ height:32px; width:calc(32px * var(--logo-ar)); }
  .proofband{ padding:14px 0 16px; }
  .proofband .movement{ margin-bottom:8px; font-size:.72rem; }
  .proofband .prow{ gap:6px 22px; }
  .hero{ padding:40px 0 60px; }
  .hero-logo{ margin-bottom:18px; }
  .hero .tag{ margin:16px auto 26px; }
  .hero-cta .btn{ flex:1 1 100%; justify-content:center; }
  .btn{ min-height:48px; }
  .hgrid{ grid-template-columns:minmax(0,1fr); gap:12px; }
  .htile{ padding:18px; }
  .rcard .rname{ font-size:1rem; }
  .cta-band{ padding:40px 0; }
  .cta-band .btn{ width:100%; justify-content:center; }
  .gal.gal-2{ grid-auto-rows:180px; gap:10px; }
  .city-filters.top{ gap:8px; }
  form .btn[type="submit"]{ width:100%; justify-content:center; }
  .modal-box{ padding:28px 22px; }
  /* show cards: poster thumbnail beside the details instead of a full-screen poster */
  .show{ flex-direction:row; }
  .show .flyer{ flex:none; width:118px; aspect-ratio:4/5; align-self:flex-start; padding:8px; }
  .show .flyer .date{ font-size:.68rem; padding:5px 7px; }
  .show .body{ padding:14px 14px 14px 16px; gap:3px; min-width:0; }
  .show .body h3{ font-size:1.05rem; }
  .show .meta{ font-size:.84rem; }
  .show .body .btn{ margin-top:10px; min-height:42px; padding:10px 14px; font-size:.9rem; }
  .shows{ gap:12px; }
  /* signup: email and phone stacked so neither gets cut off */
  .news-fields input{ flex:1 1 100%; }
  /* section intros that tuck up under their heading */
  p.lead[style*="-26px"]{ margin-top:-6px !important; }
}

/* /join: one-screen signup page for social links */
.join{ position:relative; overflow:hidden; padding:56px 0 64px; }
.join .hero-glow{ z-index:0; }
.join-in{ position:relative; z-index:1; display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:48px; align-items:center; }
.join .hero-logo{ width:min(260px,60vw); height:calc(min(260px,60vw) / var(--logo-ar)); margin:0 0 22px; }
.join h1.page-title{ font-size:clamp(1.7rem,4.6vw,2.7rem); margin:0 0 14px; }
.join-sub{ color:var(--fg-dim); font-size:1.05rem; max-width:46ch; margin:0 0 18px; }
.join-perks{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:10px; }
.join-perks li{ position:relative; padding-left:24px; color:var(--fg); font-size:.95rem; }
.join-perks li::before{ content:""; position:absolute; left:0; top:.55em; width:9px; height:9px; border-radius:2px; background:var(--accent); box-shadow:0 0 10px var(--glow); }
.join-form{ background:var(--card); border:1px solid var(--accent); border-radius:var(--radius); padding:26px 24px; box-shadow:0 0 40px rgba(61,139,245,.10); }
.join-form .btn{ width:100%; justify-content:center; margin-top:4px; }
.join-form .news-note{ font-size:.74rem; color:var(--fg-dim); margin:12px 0 0; line-height:1.45; }
.join-form .news-success{ font-size:.95rem; color:var(--fg); margin-top:12px; }
.join-form .news-success b{ color:var(--accent); }
.join-shows{ padding-top:24px; }
@media (max-width:900px){
  .join-in{ grid-template-columns:minmax(0,1fr); gap:24px; }
  .join{ padding:28px 0 40px; }
  .join .hero-logo{ display:none; }
  .join-perks li{ font-size:.9rem; }
  .join-sub{ font-size:.98rem; margin-bottom:14px; }
  .join-perks{ gap:6px; }
  .join-form{ padding:20px 18px; }
}
.join-form:has(.news-success.show) .field, .join-form:has(.news-success.show) .news-note{ display:none; }