/* ============ KUBIX DESIGN TOKENS ============ */
:root{
  --void:#0b0b12;
  --coal:#13131c;
  --steel:#1b1b26;
  --line:rgba(255,255,255,.13);
  --txt:#f2f0eb;
  --dim:#b9b9c5;
  --red:#ff2e1f;
  --amber:#ff7a18;
  --blue:#4da3ff;
  --grad:linear-gradient(90deg,var(--red),var(--amber));
  --f-display:'Anton',Impact,sans-serif;
  --f-brand:'Michroma',sans-serif;
  --f-body:'Manrope',system-ui,sans-serif;
  --f-mono:'IBM Plex Mono',monospace;
  --ease:cubic-bezier(.22,1,.36,1);
}
*{margin:0;padding:0;box-sizing:border-box}
/* overflow-x must sit on <html>: only the root element propagates overflow to the
   viewport, so `overflow-x:hidden` on <body> alone never clipped the reveal
   transforms and the page scrolled sideways on phones. `clip` avoids turning the
   root into a scroll container (which would break position:sticky / ScrollTrigger). */
html{scroll-behavior:auto;overflow-x:hidden;overflow-x:clip}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
body{
  background:var(--void);
  color:var(--txt);
  font-family:var(--f-body);
  font-size:16px;
  line-height:1.6;
  overflow-x:hidden;overflow-x:clip;
  -webkit-font-smoothing:antialiased;
}
::selection{background:var(--red);color:#fff}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:2px solid var(--amber);outline-offset:3px;border-radius:2px}

/* fine-pointer only: hide native cursor, we draw our own */
@media (pointer:fine){
  body.cursor-on, body.cursor-on a, body.cursor-on button, body.cursor-on .service, body.cursor-on .panel{cursor:none}
}

/* ============ CUSTOM CURSOR ============ */
.cursor-dot,.cursor-ring{
  position:fixed;top:0;left:0;pointer-events:none;z-index:9000;
  border-radius:50%;will-change:transform;
  display:none;
}
@media (pointer:fine){.cursor-dot,.cursor-ring{display:block}}
.cursor-dot{
  width:6px;height:6px;margin:-3px 0 0 -3px;
  background:var(--amber);
  box-shadow:0 0 10px rgba(255,122,24,.9),0 0 24px rgba(255,46,31,.5);
}
.cursor-ring{
  width:38px;height:38px;margin:-19px 0 0 -19px;
  border:1px solid rgba(255,90,40,.55);
  transition:width .35s var(--ease),height .35s var(--ease),margin .35s var(--ease),
             border-color .35s,background .35s;
}
.cursor-ring.is-hover{
  width:72px;height:72px;margin:-36px 0 0 -36px;
  border-color:rgba(255,122,24,.9);
  background:radial-gradient(circle,rgba(255,60,25,.12),transparent 65%);
}
.cursor-ring.is-down{width:26px;height:26px;margin:-13px 0 0 -13px}

/* ============ MOUSE GLOW ============ */
.mouse-glow{
  position:fixed;top:0;left:0;width:64vmax;height:64vmax;
  margin:-32vmax 0 0 -32vmax;border-radius:50%;
  background:radial-gradient(circle,rgba(255,54,26,.11) 0%,rgba(255,110,30,.05) 34%,transparent 62%);
  pointer-events:none;z-index:40;mix-blend-mode:screen;
  will-change:transform;
}
@media (pointer:coarse){.mouse-glow{display:none}}

/* grain + vignette atmosphere */
body::after{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:35;
  background:
    radial-gradient(120% 90% at 50% 0%,transparent 62%,rgba(0,0,0,.42) 100%);
  opacity:.5;
}

/* ============ NAV ============ */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  /* soft top shade so the links stay readable over the hero imagery */
  background:linear-gradient(180deg,rgba(8,8,11,.72),rgba(8,8,11,0));
  transition:background .5s,border-color .5s,backdrop-filter .5s;
  border-bottom:1px solid transparent;
}
.nav.scrolled{
  background:rgba(8,8,11,.62);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border-bottom-color:var(--line);
}
.nav-inner{
  max-width:1560px;margin:0 auto;padding:20px 40px;
  display:flex;align-items:center;justify-content:space-between;
}
.nav-logo{display:flex;align-items:center;flex-shrink:0}
.nav-logo img{display:block;height:58px;width:auto}
.nav-links{display:flex;gap:38px;list-style:none}
.nav-links a{
  font-family:var(--f-mono);font-size:13px;letter-spacing:.16em;color:#d4d4dc;
  position:relative;padding:6px 2px;transition:color .3s;text-transform:uppercase;font-weight:500;
}
.nav-links a::after{
  content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;
  background:var(--grad);transform:scaleX(0);transform-origin:right;
  transition:transform .45s var(--ease);
}
.nav-links a:hover{color:var(--txt)}
.nav-links a:hover::after{transform:scaleX(1);transform-origin:left}
.nav-cta{
  font-family:var(--f-mono);font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;
  padding:11px 22px;border:1px solid rgba(255,90,35,.5);border-radius:999px;
  color:var(--txt);transition:box-shadow .35s,background .35s;display:inline-block;font-weight:500;
}
.nav-cta:hover{background:rgba(255,60,25,.12);box-shadow:0 0 26px rgba(255,60,25,.35)}
@media (max-width:1180px){.nav-links{gap:22px}.nav-links a{letter-spacing:.1em;font-size:12px}.nav-inner{gap:24px}}
@media (max-width:1060px){.nav-links{gap:15px}.nav-links a{letter-spacing:.05em}.nav-cta{padding:10px 16px;letter-spacing:.1em}}
@media (max-width:900px){.nav-links{display:none}.nav-inner{padding:16px 22px}}

/* ============ SHARED ============ */
.eyebrow{
  font-family:var(--f-mono);font-size:12.5px;letter-spacing:.26em;color:var(--dim);
  text-transform:uppercase;display:flex;align-items:center;gap:14px;font-weight:500;
}
.eyebrow::before{content:"";width:34px;height:1px;background:var(--grad)}
.mask{overflow:hidden;display:block}
.mask>span{display:block;will-change:transform}
/* char-level mask used by the JS splitter — must stay inline */
.cmask{display:inline-block;overflow:hidden;vertical-align:bottom}
.cmask .ch{display:inline-block}
.h-display{
  font-family:var(--f-display);text-transform:uppercase;line-height:.94;
  letter-spacing:.005em;font-weight:400;
}
.grad-txt{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
/* split gradient text is painted per-letter by JS (solid colors) —
   background-clip:text on transformed spans corrupts glyphs on Android Chrome */
.section-pad{padding:150px 40px}
@media (max-width:700px){.section-pad{padding:100px 22px}}
.wrap{max-width:1460px;margin:0 auto}
.word{display:inline-block;will-change:transform,opacity,filter}
.ch{display:inline-block;will-change:transform}

/* ============ HERO ============ */
.hero{
  position:relative;min-height:100vh;min-height:100svh;
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
  background:
    radial-gradient(90% 70% at 50% 115%,rgba(255,45,20,.17),transparent 62%),
    radial-gradient(60% 50% at 80% -10%,rgba(77,163,255,.09),transparent 60%),
    var(--void);
}
#heroCanvas{position:absolute;inset:0;width:100%;height:100%;will-change:transform}
.hero-inner{
  position:relative;z-index:5;text-align:center;padding:120px 24px 140px;
  max-width:1200px;
}
.hero-label{
  font-family:var(--f-mono);font-size:12.5px;letter-spacing:.34em;color:var(--dim);
  text-transform:uppercase;margin-bottom:34px;
  display:inline-flex;align-items:center;gap:16px;font-weight:500;
}
.hero-label::before,.hero-label::after{content:"";width:42px;height:1px;background:linear-gradient(90deg,transparent,rgba(255,100,40,.7))}
.hero-label::after{transform:scaleX(-1)}
.hero-h1{
  font-size:clamp(42px,9.4vw,158px);
  text-shadow:0 0 90px rgba(255,50,20,.25);
}
.hero-h1 .row{display:block}
.hero-sub{
  max-width:560px;margin:34px auto 0;color:var(--dim);font-size:15px;font-weight:500;
}
.hero-ctas{margin-top:48px;display:flex;gap:22px;justify-content:center;flex-wrap:wrap}
.btn{
  position:relative;display:inline-flex;align-items:center;gap:14px;
  font-family:var(--f-mono);font-size:13px;letter-spacing:.2em;text-transform:uppercase;
  padding:20px 40px;border-radius:999px;color:var(--txt);
  will-change:transform;overflow:hidden;isolation:isolate;font-weight:500;
}
.btn i{width:7px;height:7px;border-radius:50%;background:currentColor;transition:transform .4s var(--ease)}
.btn:hover i{transform:scale(1.6)}
.btn-solid{background:var(--grad);color:#0a0503;font-weight:500}
.btn-solid::before{
  content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;
  background:var(--grad);filter:blur(22px);opacity:.55;transition:opacity .4s;
}
.btn-solid:hover::before{opacity:.95}
.btn-ghost{border:1px solid rgba(255,255,255,.22);transition:border-color .35s,background .35s,box-shadow .35s}
.btn-ghost:hover{border-color:rgba(255,110,40,.8);background:rgba(255,60,25,.08);box-shadow:0 0 30px rgba(255,60,25,.25)}
.hero-eq{
  position:absolute;left:0;right:0;bottom:0;height:86px;z-index:4;
  display:flex;align-items:flex-end;justify-content:center;gap:5px;
  padding:0 6vw;
  mask-image:linear-gradient(90deg,transparent,#000 18%,#000 82%,transparent);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 18%,#000 82%,transparent);
}
.hero-eq b{
  flex:1;max-width:14px;height:100%;border-radius:3px 3px 0 0;
  background:linear-gradient(180deg,rgba(255,122,24,.95),rgba(255,46,31,.28) 70%,transparent);
  transform-origin:bottom;transform:scaleY(.1);will-change:transform;
}
.scroll-hint{
  position:absolute;bottom:110px;left:50%;transform:translateX(-50%);z-index:5;
  font-family:var(--f-mono);font-size:11.5px;letter-spacing:.3em;color:var(--dim);
  text-transform:uppercase;display:flex;flex-direction:column;align-items:center;gap:12px;
}
.scroll-hint::after{
  content:"";width:1px;height:38px;background:linear-gradient(180deg,var(--amber),transparent);
  animation:drip 1.9s var(--ease) infinite;
}
@keyframes drip{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* ============ CINEMATIC INTRO ============ */
.intro{position:relative;padding:26vh 40px;overflow:hidden}
.intro-wave{position:absolute;inset:0;width:100%;height:100%;opacity:.5}
.intro-inner{position:relative;max-width:1300px;margin:0 auto;will-change:transform}
.intro-line{
  font-size:clamp(40px,7.4vw,116px);
  display:block;
}
.intro-line+.intro-line{margin-top:.15em}
.intro .dim{color:rgba(237,235,230,.4)}
.intro-note{
  margin-top:38px;font-family:var(--f-mono);font-size:12.5px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--dim);
}

/* ============ AUDIO EXPERIENCE ============ */
.audio{position:relative;background:linear-gradient(180deg,var(--void),var(--coal) 30%,var(--void))}
.audio-head{max-width:1460px;margin:0 auto 90px}
.audio-head h1,.audio-head h2{font-size:clamp(44px,6.6vw,110px);margin-top:26px}
.audio-title,.range-title{display:flex;align-items:center;gap:clamp(18px,3.4vw,64px)}
/* sized off the same vw curve as the heading (6.6vw) so it reads as part of the title */
.down-cue{
  --cue:clamp(58px,10vw,168px);
  flex:none;margin-top:26px;width:var(--cue);height:var(--cue);border-radius:50%;
  display:grid;place-items:center;color:var(--txt);
  border:2px solid rgba(255,90,35,.6);background:rgba(11,11,18,.62);
  box-shadow:0 0 calc(var(--cue)*.4) rgba(255,60,25,.28),inset 0 0 calc(var(--cue)*.2) rgba(255,120,40,.12);
  transition:background .35s,box-shadow .35s,border-color .35s;
}
.down-cue svg{width:46%;height:46%;animation:downCue 1.6s var(--ease) infinite}
.down-cue:hover{background:var(--grad);border-color:transparent;box-shadow:0 0 calc(var(--cue)*.5) rgba(255,60,25,.55)}
@keyframes downCue{0%{transform:translateY(-22%);opacity:0}35%{opacity:1}70%{transform:translateY(18%);opacity:1}100%{transform:translateY(30%);opacity:0}}
@media (max-width:600px){.down-cue{--cue:52px;border-width:1.5px}}
@media (prefers-reduced-motion:reduce){.down-cue svg{animation:none}}
.audio-lede{max-width:640px;margin-top:30px;color:var(--dim);font-size:15px;font-weight:500}
.audio-grid{
  max-width:1460px;margin:0 auto;display:grid;
  grid-template-columns:minmax(320px,540px) 1fr;gap:80px;align-items:start;
}
.audio-visual{position:sticky;top:14vh;aspect-ratio:1;min-width:0}
#serviceCanvas{width:100%;height:100%;display:block;filter:drop-shadow(0 0 30px rgba(255,50,20,.14))}
.services{list-style:none;border-top:1px solid var(--line)}
.service{
  position:relative;border-bottom:1px solid var(--line);
  padding:34px 10px;transition:padding .5s var(--ease),background .5s;
}
.service::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:2px;
  background:var(--grad);transform:scaleY(0);transition:transform .5s var(--ease);
  transform-origin:top;
}
.service-row{display:flex;align-items:baseline;gap:26px}
.service-tag{
  font-family:var(--f-mono);font-size:12px;letter-spacing:.14em;color:var(--dim);
  min-width:74px;transition:color .4s;font-weight:500;
}
.service-name{
  font-family:var(--f-display);text-transform:uppercase;font-weight:400;
  font-size:clamp(24px,2.6vw,40px);letter-spacing:.01em;line-height:1.05;
  color:rgba(242,240,235,.72);transition:color .4s,transform .5s var(--ease);
}
.service-desc{
  max-height:0;overflow:hidden;transition:max-height .55s var(--ease),opacity .5s;
  opacity:0;color:var(--dim);font-size:14.5px;max-width:540px;
  padding-left:100px;
}
.service.active{padding-left:26px;background:linear-gradient(90deg,rgba(255,50,22,.05),transparent 65%)}
.service.active::before{transform:scaleY(1)}
.service.active .service-name{color:var(--txt)}
.service.active .service-tag{color:var(--amber);text-shadow:0 0 14px rgba(255,110,30,.55)}
.service.active .service-desc{max-height:120px;opacity:1;margin-top:14px}
@media (max-width:1000px){
  .audio-grid{grid-template-columns:1fr}
  .audio-visual{position:relative;top:0;max-width:440px;margin:0 auto}
  .service-desc{padding-left:0}
}

/* ============ WAVE FIELD ============ */
.wavefield{
  position:relative;height:88vh;min-height:560px;overflow:hidden;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  background:radial-gradient(70% 90% at 50% 50%,rgba(20,20,26,.9),var(--void));
}
#waveCanvas{position:absolute;inset:0;width:100%;height:100%}
.wave-copy{
  position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  pointer-events:none;z-index:3;text-align:center;padding:0 20px;
}
.wave-copy h2{
  font-size:clamp(34px,8vw,130px);
  mix-blend-mode:screen;text-shadow:0 0 60px rgba(255,60,25,.3);
}
.wave-copy p{
  margin-top:26px;font-family:var(--f-mono);font-size:12.5px;letter-spacing:.32em;
  color:var(--dim);text-transform:uppercase;
  display:flex;align-items:center;gap:14px;
}
.wave-copy p::before,.wave-copy p::after{content:"";width:30px;height:1px;background:rgba(255,110,40,.6)}

/* ============ MODIFICATIONS ============ */
.mods{position:relative;overflow:hidden;background:var(--coal)}
.mods-head{padding:130px 40px 60px;max-width:1460px;margin:0 auto}
.mods-head h1,.mods-head h2{font-size:clamp(44px,6.6vw,110px);margin-top:26px}
/* The stage used to pin the page and convert vertical scroll into horizontal
   travel. It now sits in normal flow: the page scrolls past it like any other
   section, and the track drifts sideways on its own like a marquee. No snap
   points — they would fight the continuous motion — and the panel set is
   cloned in JS so the drift can loop without a seam. */
.mods-stage{position:relative;padding:0 0 40px}
.mods-track{
  display:flex;gap:4vw;padding:0 6vw;
  overflow-x:auto;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;
  scrollbar-width:none;-ms-overflow-style:none;
}
.mods-track::-webkit-scrollbar{display:none}
.panel{
  position:relative;flex:0 0 auto;width:min(560px,74vw);height:66vh;min-height:420px;
  border-radius:18px;overflow:hidden;border:1px solid var(--line);
  transform-style:preserve-3d;will-change:transform;
  transition:border-color .4s;
  background:var(--steel);
}
.panel:hover{border-color:rgba(255,110,40,.5)}
.panel-visual{position:absolute;inset:0;transition:transform .8s var(--ease)}
.panel:hover .panel-visual{transform:scale(1.07)}
.panel-visual::after{ /* streak of light */
  content:"";position:absolute;top:-40%;left:-30%;width:55%;height:180%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.06),transparent);
  transform:rotate(12deg) translateX(-140%);transition:transform 1.1s var(--ease);
}
.panel:hover .panel-visual::after{transform:rotate(12deg) translateX(340%)}
.v1{background:
  radial-gradient(120% 90% at 20% 100%,rgba(255,46,31,.42),transparent 55%),
  radial-gradient(100% 80% at 90% 10%,rgba(77,163,255,.22),transparent 55%),
  linear-gradient(180deg,#101016,#08080b)}
.v2{background:
  radial-gradient(130% 100% at 80% 100%,rgba(120,72,40,.5),transparent 60%),
  repeating-linear-gradient(115deg,rgba(255,255,255,.028) 0 2px,transparent 2px 14px),
  linear-gradient(180deg,#12100e,#080808)}
.v3{background:
  radial-gradient(90% 90% at 50% 120%,rgba(255,110,24,.35),transparent 58%),
  repeating-radial-gradient(circle at 50% 115%,transparent 0 44px,rgba(255,120,40,.10) 44px 45px),
  linear-gradient(180deg,#0e0e13,#070709)}
.v4{background:
  radial-gradient(100% 90% at 15% 0%,rgba(77,163,255,.30),transparent 55%),
  linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px),
  linear-gradient(180deg,#0b0d12,#07080a);
  background-size:auto,44px 44px,44px 44px,auto}
.v5{background:
  radial-gradient(120% 100% at 85% 15%,rgba(255,46,31,.30),transparent 55%),
  conic-gradient(from 210deg at 30% 110%,rgba(255,140,50,.16),transparent 32%),
  linear-gradient(180deg,#101014,#08080a)}
.panel-glowline{
  position:absolute;left:34px;right:34px;bottom:118px;height:1px;
  background:linear-gradient(90deg,var(--amber),transparent 70%);
  box-shadow:0 0 16px rgba(255,110,30,.7);opacity:.7;
}
.panel-body{position:absolute;left:34px;right:34px;bottom:30px;transform:translateZ(40px)}
.panel-title{
  font-family:var(--f-display);text-transform:uppercase;font-weight:400;
  font-size:clamp(28px,3vw,44px);line-height:1;
}
.panel-desc{
  margin-top:12px;color:var(--dim);font-size:14px;max-width:380px;
  opacity:0;transform:translateY(12px);transition:opacity .5s .05s,transform .5s .05s var(--ease);
}
.panel:hover .panel-desc{opacity:1;transform:translateY(0)}
.panel-ghost{ /* huge outline word inside panel */
  position:absolute;top:22px;left:-6px;
  font-family:var(--f-display);font-size:clamp(80px,9vw,150px);text-transform:uppercase;
  color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.07);line-height:1;
  letter-spacing:.02em;white-space:nowrap;user-select:none;pointer-events:none;
}

/* ============ SOUND LAB ============ */
.lab{position:relative;background:var(--void);overflow:hidden}
.lab::before{ /* faint grid */
  content:"";position:absolute;inset:0;
  background:linear-gradient(rgba(255,255,255,.022) 1px,transparent 1px),
             linear-gradient(90deg,rgba(255,255,255,.022) 1px,transparent 1px);
  background-size:72px 72px;
  mask-image:radial-gradient(80% 80% at 50% 50%,#000,transparent);
  -webkit-mask-image:radial-gradient(80% 80% at 50% 50%,#000,transparent);
}
.lab-head{max-width:1460px;margin:0 auto 70px;position:relative}
.lab-head h1,.lab-head h2{font-size:clamp(44px,6.6vw,110px);margin-top:26px}
.lab-frame{
  position:relative;max-width:1460px;margin:0 auto;
  border:1px solid rgba(255,255,255,.1);border-radius:14px;
  background:linear-gradient(180deg,rgba(26,26,36,.78),rgba(14,14,20,.88));
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  padding:56px;overflow:hidden;
}
.lab-frame::before,.lab-frame::after,
.lab-corners::before,.lab-corners::after{
  content:"";position:absolute;width:22px;height:22px;border:1px solid var(--amber);
  filter:drop-shadow(0 0 6px rgba(255,110,30,.8));
}
.lab-frame::before{top:-1px;left:-1px;border-right:0;border-bottom:0}
.lab-frame::after{top:-1px;right:-1px;border-left:0;border-bottom:0}
.lab-corners::before{bottom:-1px;left:-1px;border-right:0;border-top:0}
.lab-corners::after{bottom:-1px;right:-1px;border-left:0;border-top:0}
.lab-corners{position:absolute;inset:0;pointer-events:none}
.lab-scan{
  position:absolute;left:0;right:0;top:0;height:120px;pointer-events:none;
  background:linear-gradient(180deg,transparent,rgba(255,110,30,.05),transparent);
  animation:scan 7s linear infinite;
}
@keyframes scan{from{transform:translateY(-140px)}to{transform:translateY(120vh)}}
.lab-status{
  display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:14px;
  font-family:var(--f-mono);font-size:12px;letter-spacing:.18em;color:var(--dim);
  text-transform:uppercase;padding-bottom:34px;border-bottom:1px solid var(--line);
}
.lab-status .live{display:flex;align-items:center;gap:10px;color:var(--amber)}
.lab-status .live::before{
  content:"";width:8px;height:8px;border-radius:50%;background:var(--amber);
  box-shadow:0 0 10px var(--amber);animation:blink 1.2s steps(2) infinite;
}
@keyframes blink{50%{opacity:.25}}
.lab-grid{
  display:grid;grid-template-columns:1fr 1.4fr 1fr;gap:56px;padding-top:48px;align-items:stretch;
}
.stat{padding:10px 0 26px;border-bottom:1px dashed rgba(255,255,255,.1)}
.stat:last-child{border-bottom:0}
.stat-num{
  font-family:var(--f-display);font-size:clamp(46px,4.6vw,78px);line-height:1;
  display:flex;align-items:baseline;gap:8px;
}
.stat-num small{font-size:.38em;color:var(--amber);font-family:var(--f-mono);letter-spacing:.1em}
.stat-label{
  margin-top:10px;font-family:var(--f-mono);font-size:11.5px;letter-spacing:.24em;
  color:var(--dim);text-transform:uppercase;font-weight:500;
}
#labCanvas{width:100%;height:100%;min-height:320px;display:block}
.lab-spectrum{
  border:1px solid var(--line);border-radius:10px;overflow:hidden;position:relative;
  background:rgba(6,6,9,.6);display:flex;
}
.lab-spectrum .axis{
  position:absolute;left:14px;right:14px;bottom:10px;display:flex;justify-content:space-between;
  font-family:var(--f-mono);font-size:11px;letter-spacing:.14em;color:var(--dim);
}
.faders{display:flex;flex-direction:column;gap:30px;justify-content:center}
.fader label{
  display:flex;justify-content:space-between;font-family:var(--f-mono);
  font-size:11.5px;letter-spacing:.24em;color:var(--dim);text-transform:uppercase;margin-bottom:10px;
}
.fader label b{color:var(--txt);font-weight:500}
.fader-track{height:4px;border-radius:99px;background:rgba(255,255,255,.08);overflow:hidden}
.fader-fill{
  height:100%;border-radius:inherit;background:var(--grad);
  box-shadow:0 0 12px rgba(255,80,25,.7);transform-origin:left;will-change:transform;
}
.knobs{display:flex;gap:34px;margin-top:8px}
.knob{display:flex;flex-direction:column;align-items:center;gap:10px}
.knob-dial{
  width:58px;height:58px;border-radius:50%;position:relative;
  background:conic-gradient(from 220deg,var(--red),var(--amber) 55%,rgba(255,255,255,.06) 55%);
  box-shadow:inset 0 0 0 2px rgba(0,0,0,.7),0 0 18px rgba(255,60,25,.25);
}
.knob-dial::after{
  content:"";position:absolute;inset:7px;border-radius:50%;background:#0d0d12;
  box-shadow:inset 0 2px 6px rgba(0,0,0,.8);
}
.knob-dial::before{
  content:"";position:absolute;top:9px;left:50%;width:2px;height:12px;margin-left:-1px;
  background:var(--amber);z-index:2;box-shadow:0 0 8px var(--amber);border-radius:2px;
  transform-origin:1px 20px;
}
.knob span{font-family:var(--f-mono);font-size:11px;letter-spacing:.22em;color:var(--dim)}
@media (max-width:1060px){
  .lab-grid{grid-template-columns:1fr}
  .lab-frame{padding:34px 24px}
  .lab-spectrum{min-height:280px}
}

/* ============ BEFORE / AFTER ============ */
.compare{position:relative;background:linear-gradient(180deg,var(--void),var(--coal))}
.compare-head{max-width:1460px;margin:0 auto 70px;text-align:center}
.compare-head h2{font-size:clamp(40px,6vw,96px);margin-top:26px}
.cmp-stage{
  --energy:.5;
  position:relative;max-width:1460px;margin:0 auto;height:64vh;min-height:440px;
  border:1px solid var(--line);border-radius:16px;overflow:hidden;
  background:#0d0d15;touch-action:none;user-select:none;
}
.cmp-stage canvas{position:absolute;inset:0;width:100%;height:100%}
#cmpAfter{clip-path:inset(0 0 0 50%)}
.cmp-label{
  position:absolute;top:26px;z-index:6;font-family:var(--f-mono);font-size:12px;
  letter-spacing:.26em;text-transform:uppercase;padding:10px 18px;border-radius:99px;
  border:1px solid var(--line);background:rgba(8,8,11,.55);backdrop-filter:blur(8px);font-weight:500;
}
.cmp-label.before{left:26px;color:var(--dim)}
.cmp-label.after{right:26px;color:var(--amber);border-color:rgba(255,110,40,.5);
  box-shadow:0 0 22px rgba(255,80,25,calc(.15 + var(--energy)*.3))}
.cmp-handle{
  position:absolute;top:0;bottom:0;left:50%;width:2px;z-index:7;
  background:linear-gradient(180deg,transparent,var(--amber) 25%,var(--amber) 75%,transparent);
  box-shadow:0 0 18px rgba(255,110,30,.8);cursor:ew-resize;
}
.cmp-handle::after{
  content:"◂ ▸";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:58px;height:58px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:13px;letter-spacing:2px;color:#ffd9c2;
  background:rgba(10,10,14,.85);border:1px solid rgba(255,120,45,.8);
  box-shadow:0 0 30px rgba(255,70,25,.5);backdrop-filter:blur(6px);
}
.cmp-mute{
  position:absolute;left:50%;bottom:22px;transform:translateX(-50%);z-index:8;
  display:flex;align-items:center;gap:10px;cursor:pointer;
  font-family:var(--f-mono);font-size:11.5px;letter-spacing:.22em;text-transform:uppercase;
  color:#ffd9c2;padding:10px 18px 10px 14px;border-radius:99px;
  border:1px solid rgba(255,120,45,.6);background:rgba(8,8,11,.7);backdrop-filter:blur(8px);
  transition:border-color .3s,color .3s,box-shadow .3s;font-weight:500;
}
.cmp-mute:hover,.cmp-mute:focus-visible{box-shadow:0 0 22px rgba(255,80,25,.45);outline:none}
.cmp-mute-ico{display:flex;align-items:flex-end;gap:2px;height:12px}
.cmp-mute-ico::before,.cmp-mute-ico::after{content:"";width:3px;background:var(--amber);border-radius:1px;
  animation:cmpEq .9s ease-in-out infinite alternate}
.cmp-mute-ico::before{height:12px}
.cmp-mute-ico::after{height:7px;animation-delay:-.45s}
@keyframes cmpEq{from{transform:scaleY(.3)}to{transform:scaleY(1)}}
.cmp-mute[aria-pressed="true"]{color:var(--dim);border-color:var(--line)}
.cmp-mute.is-blocked{animation:cmpPulse 1.6s ease-in-out infinite}
@keyframes cmpPulse{0%,100%{box-shadow:0 0 0 0 rgba(255,90,30,.55)}50%{box-shadow:0 0 0 12px rgba(255,90,30,0)}}
.cmp-mute[aria-pressed="true"] .cmp-mute-ico::before,.cmp-mute[aria-pressed="true"] .cmp-mute-ico::after,
.cmp-mute.is-blocked .cmp-mute-ico::before,.cmp-mute.is-blocked .cmp-mute-ico::after{
  animation:none;transform:scaleY(.3);background:var(--dim)}
/* Sound Lab play button — reuses .cmp-mute; silent until pressed */
.lab-play{bottom:auto;top:18px}
/* here pressed = playing, so undo the muted look .cmp-mute gives it */
.cmp-mute.lab-play[aria-pressed="true"]{color:#ffd9c2;border-color:rgba(255,120,45,.6)}
.cmp-mute.lab-play[aria-pressed="true"] .cmp-mute-ico::before,
.cmp-mute.lab-play[aria-pressed="true"] .cmp-mute-ico::after{animation:cmpEq .9s ease-in-out infinite alternate;background:var(--amber);transform:none}
.cmp-mute.lab-play[aria-pressed="true"] .cmp-mute-ico::after{animation-delay:-.45s}
.lab-play[aria-pressed="false"]{animation:cmpPulse 1.6s ease-in-out infinite}
.lab-play[aria-pressed="false"] .cmp-mute-ico{width:10px;gap:0}
.lab-play[aria-pressed="false"] .cmp-mute-ico::before{
  animation:none;width:0;height:0;background:none;border-radius:0;
  border-style:solid;border-width:6px 0 6px 10px;border-color:transparent transparent transparent var(--amber)}
.lab-play[aria-pressed="false"] .cmp-mute-ico::after{display:none}
.cmp-mute.lab-play.is-loading[aria-pressed="true"] .cmp-mute-ico::before,
.cmp-mute.lab-play.is-loading[aria-pressed="true"] .cmp-mute-ico::after{animation:none;transform:scaleY(.3)}
/* "you can drag this" coach — swaying hand under the knob + pulsing knob,
   removed for good once the visitor touches the fader (.cmp-used) */
.cmp-coach{
  position:absolute;left:50%;top:calc(50% + 44px);transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:6px;pointer-events:none;
  color:#ffd9c2;transition:opacity .4s;
}
.cmp-coach svg{width:30px;height:30px;filter:drop-shadow(0 0 8px rgba(255,90,30,.8));
  animation:coachSway 1.6s ease-in-out infinite}
.cmp-coach b{font-family:var(--f-mono);font-weight:500;font-size:11px;letter-spacing:.24em;
  text-transform:uppercase;white-space:nowrap;padding:5px 10px;border-radius:99px;
  background:rgba(8,8,11,.7);border:1px solid rgba(255,120,45,.45)}
@keyframes coachSway{0%,100%{transform:translateX(-16px) rotate(-8deg)}50%{transform:translateX(16px) rotate(8deg)}}
.cmp-stage:not(.cmp-used) .cmp-handle::after{animation:knobPulse 1.8s ease-in-out infinite}
@keyframes knobPulse{
  0%,100%{box-shadow:0 0 30px rgba(255,70,25,.5),0 0 0 0 rgba(255,110,40,.55)}
  50%{box-shadow:0 0 30px rgba(255,70,25,.5),0 0 0 16px rgba(255,110,40,0)}}
.cmp-stage.cmp-used .cmp-coach{opacity:0}
@media (prefers-reduced-motion:reduce){
  .cmp-coach svg,.cmp-stage:not(.cmp-used) .cmp-handle::after{animation:none}
}
.cmp-hint{
  text-align:center;margin-top:26px;font-family:var(--f-mono);font-size:11.5px;
  letter-spacing:.28em;color:var(--dim);text-transform:uppercase;
}

/* ============ BRAND STATEMENT ============ */
.statement{position:relative;background:var(--void)}
.statement-stage{
  height:100vh;display:flex;align-items:center;justify-content:center;
  position:relative;overflow:hidden;text-align:center;
}
.st-line{
  position:absolute;padding:0 24px;font-size:clamp(36px,6.4vw,104px);
  will-change:transform,opacity,filter;
}
.st-logo{
  position:absolute;display:flex;flex-direction:column;align-items:center;gap:26px;
  will-change:transform,opacity;
}
.st-logo .k{
  display:block;width:clamp(260px,42vw,560px);height:auto;
  filter:drop-shadow(0 0 60px rgba(255,60,25,.35));
}
.st-logo .t{
  font-family:var(--f-mono);font-size:12.5px;letter-spacing:.4em;color:var(--dim);text-transform:uppercase;
}
.pulse-rings{position:absolute;inset:0;pointer-events:none;display:grid;place-items:center}
.pulse-rings span{
  grid-area:1/1;width:34vmin;height:34vmin;border-radius:50%;
  border:1px solid rgba(255,80,30,.55);
  animation:bassRing 3.2s cubic-bezier(.16,.8,.3,1) infinite;
  opacity:0;
}
.pulse-rings span:nth-child(2){animation-delay:.8s}
.pulse-rings span:nth-child(3){animation-delay:1.6s}
.pulse-rings span:nth-child(4){animation-delay:2.4s}
@keyframes bassRing{
  0%{transform:scale(.4);opacity:0}
  8%{opacity:.85}
  100%{transform:scale(3.1);opacity:0}
}

/* ============ CONTACT ============ */
.contact{
  position:relative;background:
   radial-gradient(80% 60% at 50% 110%,rgba(255,50,22,.2),transparent 62%),var(--coal);
  border-top:1px solid var(--line);overflow:hidden;text-align:center;
}
.contact h2{font-size:clamp(44px,7vw,112px)}
address.contact-grid{font-style:normal}
.contact-lede{max-width:620px;margin:34px auto 0;color:var(--dim);font-size:15px;font-weight:500}
.contact .eyebrow{justify-content:center;margin-bottom:30px}
.contact .eyebrow::after{content:"";width:34px;height:1px;background:var(--grad)}
.cta-big{
  margin-top:56px;display:inline-flex;align-items:center;gap:18px;
  font-family:var(--f-mono);font-size:14px;letter-spacing:.26em;text-transform:uppercase;
  padding:28px 58px;border-radius:999px;background:var(--grad);color:#0a0503;font-weight:500;
  position:relative;isolation:isolate;will-change:transform;
}
.cta-big::before{
  content:"";position:absolute;inset:0;border-radius:inherit;z-index:-1;
  background:var(--grad);filter:blur(30px);opacity:.6;transition:opacity .4s,filter .4s;
}
.cta-big:hover::before{opacity:1;filter:blur(40px)}
.cta-big i{width:8px;height:8px;border-radius:50%;background:#0a0503;transition:transform .4s var(--ease)}
.cta-big:hover i{transform:scale(1.7)}
.contact-grid{
  margin:90px auto 0;max-width:1200px;display:grid;
  grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:14px;overflow:hidden;
}
.c-item{
  background:rgba(18,18,26,.88);padding:34px 26px;text-align:left;
  transition:background .4s;position:relative;overflow:hidden;
}
.c-item::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
  background:var(--grad);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease);
}
.c-item:hover{background:rgba(20,14,12,.9)}
.c-item:hover::after{transform:scaleX(1)}
.c-item b{
  display:block;font-family:var(--f-mono);font-weight:500;font-size:11.5px;
  letter-spacing:.26em;color:var(--dim);text-transform:uppercase;margin-bottom:14px;
}
.c-item span{font-size:16px;font-weight:600;letter-spacing:.02em}
.c-item small{display:block;margin-top:8px;font-size:14px;font-weight:400;color:var(--dim);letter-spacing:.01em;line-height:1.55}
/* five tiles: one row on wide screens; the address tile (last) spans the
   leftover cells on the 3- and 2-column layouts so no row is left ragged */
.contact-grid{grid-template-columns:repeat(5,1fr)}
.c-icon{
  display:grid;place-items:center;width:44px;height:44px;border-radius:50%;margin-bottom:20px;
  color:var(--amber);border:1px solid rgba(255,110,40,.4);
  background:radial-gradient(circle at 50% 35%,rgba(255,90,30,.18),rgba(12,12,18,.5) 70%);
  box-shadow:0 0 18px rgba(255,70,25,.18);
  transition:transform .5s var(--ease),color .4s,background .4s,box-shadow .4s;
}
.c-icon svg{width:20px;height:20px}
.c-item:hover .c-icon{transform:rotate(-8deg) scale(1.08);color:#0a0503;background:var(--grad);border-color:transparent;box-shadow:0 0 24px rgba(255,70,25,.5)}
@media (max-width:1100px){.contact-grid{grid-template-columns:repeat(3,1fr)}.contact-grid .c-item:last-child{grid-column:span 2}}
@media (max-width:900px){.contact-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.contact-grid{grid-template-columns:1fr}.contact-grid .c-item:last-child{grid-column:auto}}

/* ============ FOOTER ============ */
footer{
  border-top:1px solid var(--line);padding:34px 40px 0;
  font-family:var(--f-mono);font-size:11.5px;letter-spacing:.2em;color:var(--dim);text-transform:uppercase;
  background:var(--void);
}
.footer-row{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
/* the full postal address is several times longer than the locality line it
   replaced, so this cell takes the whole first row and the other two sit under
   it, rather than the three of them fighting over one line */
footer .fl{display:flex;align-items:flex-start;gap:10px;flex:1 1 100%;
  letter-spacing:.16em;line-height:1.9}
footer .fl i{width:6px;height:6px;border-radius:50%;background:var(--grad);
  flex:0 0 auto;margin-top:7px}
.footer-base{
  margin-top:26px;border-top:1px solid var(--line);padding:18px 0 34px;
  display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;
  font-size:11px;letter-spacing:.16em;
}
/* only the store carries the cart FAB (fixed at right/bottom 26px, 60px across),
   so only its last footer line has to clear that corner */
.footer-base.fab-clear{padding-bottom:104px}
.footer-base a{
  color:var(--txt);border-bottom:1px solid rgba(255,255,255,.22);padding-bottom:2px;
  transition:color .3s,border-color .3s;
}
.footer-base a:hover{color:var(--amber);border-color:var(--amber)}


/* ============ MODS VISUALIZER + PANEL MEDIA ============ */
.mods-head{position:relative}
#modsCanvas{
  position:absolute;right:-30px;top:50%;width:360px;height:360px;
  transform:translateY(-50%);pointer-events:none;opacity:.95;
  filter:drop-shadow(0 0 24px rgba(255,60,25,.14));
}
@media (max-width:1100px){#modsCanvas{width:230px;height:230px;right:-40px;opacity:.45}}
.mods-stage::before{
  content:"";position:absolute;left:50%;top:50%;width:160vmin;height:160vmin;
  background:repeating-conic-gradient(from 0deg,rgba(255,110,30,.12) 0deg .5deg,transparent .5deg 5deg);
  -webkit-mask:radial-gradient(circle,transparent 33%,#000 34%,#000 45%,transparent 46%);
  mask:radial-gradient(circle,transparent 33%,#000 34%,#000 45%,transparent 46%);
  animation:spinC 70s linear infinite;opacity:.55;pointer-events:none;
}
@keyframes spinC{from{transform:translate(-50%,-50%) rotate(0)}to{transform:translate(-50%,-50%) rotate(360deg)}}
@keyframes spin{to{transform:rotate(360deg)}}
.panel-media{position:absolute;inset:0;overflow:hidden;transition:transform .8s var(--ease)}
.panel:hover .panel-media{transform:scale(1.06)}
.panel-img{
  /* a real <img>, so the width is given outright (116% = the -8% bleed either side) */
  position:absolute;top:0;left:-8%;width:116%;height:100%;max-width:none;
  object-fit:cover;object-position:center;
  /* the KUBIX shots are already low-key, so they run at full opacity with a light lift */
  opacity:1;filter:saturate(1.06) contrast(1.04) brightness(1.12);will-change:transform;
}
.panel-shade{
  position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(8,8,14,.20) 0%,rgba(8,8,14,0) 40%,rgba(7,7,12,.82) 94%);
}
.panel-media::after{ /* light streak sweep */
  content:"";position:absolute;top:-40%;left:-30%;width:55%;height:180%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.09),transparent);
  transform:rotate(12deg) translateX(-160%);transition:transform 1.1s var(--ease);
}
.panel:hover .panel-media::after{transform:rotate(12deg) translateX(360%)}
.panel-body,.panel-glowline,.panel-ghost{z-index:3}

/* ============ KUBIX STORE ============ */
.store{position:relative;background:linear-gradient(180deg,var(--void),var(--coal) 40%,var(--void));border-top:1px solid var(--line)}
.store-head{max-width:1460px;margin:0 auto 60px;position:relative}
.store-head h1,.store-head h2{font-size:clamp(44px,6.6vw,110px);margin-top:26px}
.store-lede{max-width:660px;margin-top:28px;color:var(--dim);font-size:15px;font-weight:500}
.chips{display:flex;gap:12px;flex-wrap:wrap;margin-top:38px}
.chip{font-family:var(--f-mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);
  padding:11px 20px;border:1px solid var(--line);border-radius:999px;transition:color .35s,border-color .35s,background .35s,box-shadow .35s;font-weight:500;}
.chip:hover{color:var(--txt);border-color:rgba(255,110,40,.5)}
.chip.active{color:#0a0503;background:var(--grad);border-color:transparent;box-shadow:0 0 18px rgba(255,70,25,.4)}
.store-grid{max-width:1460px;margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
@media (max-width:1100px){.store-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.store-grid{grid-template-columns:1fr}}
.prod{position:relative;border:1px solid var(--line);border-radius:16px;overflow:hidden;
  background:linear-gradient(180deg,rgba(28,28,38,.6),rgba(14,14,20,.92));
  transition:transform .5s var(--ease),border-color .4s,box-shadow .4s}
.prod:hover{transform:translateY(-8px);border-color:rgba(255,110,40,.55);
  box-shadow:0 18px 50px rgba(0,0,0,.5),0 0 30px rgba(255,60,25,.14)}
.prod.hide{display:none}
.prod-visual{position:relative;height:212px;display:grid;place-items:center;
  background:radial-gradient(80% 90% at 50% 100%,rgba(255,60,25,.15),transparent 62%)}
.prod-ring{position:absolute;width:150px;height:150px;border-radius:50%;
  border:1px dashed rgba(255,140,60,.4);animation:spin 16s linear infinite;transition:border-color .4s,filter .4s}
.prod-ring::after{content:"";position:absolute;inset:12px;border-radius:50%;border:1px solid rgba(255,255,255,.09)}
.prod:hover .prod-ring{border-color:rgba(255,140,60,.85);filter:drop-shadow(0 0 8px rgba(255,110,30,.7))}
.prod-visual svg{width:62px;height:62px;color:var(--amber);
  filter:drop-shadow(0 0 12px rgba(255,110,30,.5));transition:transform .5s var(--ease);position:relative}
.prod:hover .prod-visual svg{transform:scale(1.15) rotate(-4deg)}
.prod-body{padding:22px 24px 26px}
.prod-cat{font-family:var(--f-mono);font-size:11px;letter-spacing:.22em;color:var(--dim);text-transform:uppercase;font-weight:500;}
.prod-name{font-family:var(--f-display);text-transform:uppercase;font-size:22px;font-weight:400;margin-top:8px;line-height:1.12}
.prod-spec{color:var(--dim);font-size:14px;margin-top:6px}
.prod-foot{display:flex;align-items:center;margin-top:22px}
.add-btn{font-family:var(--f-mono);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;
  padding:13px 20px;border-radius:999px;border:1px solid rgba(255,110,40,.55);color:var(--txt);
  transition:background .35s,color .35s,box-shadow .35s;white-space:nowrap;
  width:100%;text-align:center;font-weight:500;}
.add-btn:hover{background:var(--grad);color:#0a0503;box-shadow:0 0 22px rgba(255,70,25,.5)}
.add-btn.picked{background:var(--grad);color:#0a0503;border-color:transparent;box-shadow:0 0 16px rgba(255,70,25,.35)}
.add-btn.picked:hover{background:transparent;color:var(--txt);border-color:rgba(255,110,40,.55);box-shadow:none}
.cart-fab{position:fixed;right:26px;bottom:26px;z-index:200;width:60px;height:60px;border-radius:50%;
  background:var(--grad);display:grid;place-items:center;color:#0a0503;
  box-shadow:0 10px 30px rgba(0,0,0,.5),0 0 26px rgba(255,70,25,.5);will-change:transform}
.cart-fab svg{width:24px;height:24px}
.cart-count{position:absolute;top:-4px;right:-4px;min-width:22px;height:22px;border-radius:99px;
  background:#0b0b12;border:1px solid var(--amber);color:var(--txt);
  font-family:var(--f-mono);font-size:11px;display:grid;place-items:center;padding:0 5px;font-weight:500;}
/* accessories swaps the cart for a WhatsApp button */
.wa-fab{background:#25d366;color:#fff;box-shadow:0 10px 30px rgba(0,0,0,.5),0 0 26px rgba(37,211,102,.45)}
.wa-fab svg{width:30px;height:30px}
.wa-fab .cart-count.empty{display:none}
.cart-toast{position:fixed;left:50%;bottom:104px;transform:translate(-50%,20px);z-index:200;opacity:0;pointer-events:none;
  font-family:var(--f-mono);font-size:12px;letter-spacing:.2em;text-transform:uppercase;
  background:rgba(16,16,24,.94);border:1px solid rgba(255,110,40,.5);padding:13px 24px;border-radius:99px;
  transition:opacity .3s,transform .3s}
.cart-toast.show{opacity:1;transform:translate(-50%,0)}
.fly-dot{position:fixed;width:12px;height:12px;border-radius:50%;background:var(--grad);z-index:300;
  pointer-events:none;box-shadow:0 0 12px rgba(255,80,25,.9);margin:-6px 0 0 -6px}

/* ============ MOBILE NAV ============ */
.nav-burger{
  display:none;width:44px;height:44px;border-radius:50%;
  border:1px solid rgba(255,90,35,.5);
  align-items:center;justify-content:center;flex-direction:column;gap:5px;
  flex:0 0 auto;transition:background .35s,box-shadow .35s;
}
.nav-burger:hover{background:rgba(255,60,25,.12)}
.nav-burger i{
  display:block;width:17px;height:1.5px;background:var(--txt);border-radius:2px;
  transition:transform .4s var(--ease),opacity .25s;
}
.nav-burger.open i:first-child{transform:translateY(3.25px) rotate(45deg)}
.nav-burger.open i:last-child{transform:translateY(-3.25px) rotate(-45deg)}
.nav-menu{
  display:none;
  border-top:1px solid var(--line);
  background:rgba(8,8,11,.94);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  padding:10px 22px 26px;
  max-height:calc(100svh - 64px);overflow-y:auto;overscroll-behavior:contain;
}
.nav-menu[hidden]{display:none}
.nav-menu ul{list-style:none}
.nav-menu li+li{border-top:1px solid rgba(255,255,255,.07)}
.nav-menu a{
  display:block;padding:17px 2px;
  font-family:var(--f-mono);font-size:14px;letter-spacing:.18em;text-transform:uppercase;
  color:#d4d4dc;transition:color .3s;font-weight:500;
}
.nav-menu a:hover,.nav-menu a:focus-visible{color:var(--txt)}
.nav-menu-cta{
  margin-top:20px;display:block;text-align:center;
  padding:16px 22px;border-radius:999px;background:var(--grad);color:#0a0503!important;
  font-family:var(--f-mono);font-size:13px;letter-spacing:.16em;text-transform:uppercase;font-weight:500;
}

/* ============ PAGE TRANSITION LOADER ============
   A rev-counter sweep that covers the gap between pages, so moving between
   Home, Modifications, Products and Car Lab reads as one continuous build
   rather than four separate page loads. The overlay ships visible in the
   markup and is taken away by JS; the `loaderBail` animation is the safety
   net that clears it anyway if the scripts fail or arrive late. */
.loader{
  position:fixed;inset:0;z-index:8000;display:grid;place-items:center;
  background:
    radial-gradient(70% 55% at 50% 52%,rgba(255,60,25,.14),transparent 64%),
    var(--void);
  /* dropping back in is quick (the click should feel answered at once);
     lifting off keeps the slower fade in .loader.gone below */
  transition:opacity .22s var(--ease),visibility .22s;
  animation:loaderBail 0s linear 3000ms forwards;
}
.loader.gone{opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .45s var(--ease),visibility .45s}
@keyframes loaderBail{to{opacity:0;visibility:hidden;pointer-events:none}}
/* once the page has taken over, the overlay must never animate itself back */
.loader.armed{animation:none}

.loader-inner{display:grid;justify-items:center;gap:22px}
.loader-gauge{position:relative;width:132px;height:132px}
.loader-gauge svg{width:100%;height:100%;transform:rotate(135deg)}
.loader-gauge circle{fill:none;stroke-linecap:round}
.lg-track{stroke:rgba(255,255,255,.08);stroke-width:2}
/* 3/4 of the circumference is the dial; the rest is the gap at the bottom */
.lg-arc{stroke:var(--amber);stroke-width:3;stroke-dasharray:254 340;
  stroke-dashoffset:254;animation:lgSweep 1.5s var(--ease) infinite;
  filter:drop-shadow(0 0 6px rgba(255,110,30,.7))}
.lg-red{stroke:var(--red);stroke-width:3;stroke-dasharray:46 340;stroke-dashoffset:-208;opacity:.55}
@keyframes lgSweep{
  0%{stroke-dashoffset:254}
  55%{stroke-dashoffset:24}
  70%{stroke-dashoffset:58}
  100%{stroke-dashoffset:254}
}
.lg-ticks{
  position:absolute;inset:9px;border-radius:50%;
  background:repeating-conic-gradient(from 138deg,
    rgba(255,255,255,.34) 0deg 1.1deg,transparent 1.1deg 15deg);
  -webkit-mask:radial-gradient(circle,transparent 40px,#000 40px);
  mask:radial-gradient(circle,transparent 40px,#000 40px);
}
.lg-needle{
  position:absolute;left:50%;top:50%;width:3px;height:46px;border-radius:3px;
  background:linear-gradient(180deg,var(--red),rgba(255,122,24,.25));
  transform-origin:50% 100%;transform:translate(-50%,-100%) rotate(-135deg);
  box-shadow:0 0 12px rgba(255,60,25,.8);
  animation:lgNeedle 1.5s var(--ease) infinite;
}
@keyframes lgNeedle{
  0%{transform:translate(-50%,-100%) rotate(-135deg)}
  55%{transform:translate(-50%,-100%) rotate(112deg)}
  70%{transform:translate(-50%,-100%) rotate(78deg)}
  100%{transform:translate(-50%,-100%) rotate(-135deg)}
}
.lg-hub{
  position:absolute;left:50%;top:50%;width:13px;height:13px;border-radius:50%;
  transform:translate(-50%,-50%);background:var(--grad);
  box-shadow:0 0 16px rgba(255,80,25,.9);
}
.loader-logo{display:block;height:64px;width:auto}
.loader-eq{display:flex;align-items:flex-end;gap:5px;height:22px}
.loader-eq i{
  width:3px;height:100%;border-radius:2px;background:var(--grad);
  transform-origin:50% 100%;transform:scaleY(.2);
  animation:lgEq .9s ease-in-out infinite;
}
.loader-eq i:nth-child(1){animation-delay:-.70s}
.loader-eq i:nth-child(2){animation-delay:-.15s}
.loader-eq i:nth-child(3){animation-delay:-.45s}
.loader-eq i:nth-child(4){animation-delay:-.05s}
.loader-eq i:nth-child(5){animation-delay:-.60s}
.loader-eq i:nth-child(6){animation-delay:-.25s}
.loader-eq i:nth-child(7){animation-delay:-.50s}
@keyframes lgEq{0%,100%{transform:scaleY(.18)}50%{transform:scaleY(1)}}
.loader-note{
  font-family:var(--f-mono);font-size:11px;letter-spacing:.3em;
  text-transform:uppercase;color:var(--dim);
}
@media (max-width:700px){
  .loader-gauge{width:108px;height:108px}
  .loader-logo{height:54px}
}
/* motion-sensitive visitors get the cover without the rev */
@media (prefers-reduced-motion:reduce){
  .loader .lg-arc,.loader .lg-needle,.loader .loader-eq i{animation:none}
  .lg-needle{transform:translate(-50%,-100%) rotate(-20deg)}
  .lg-arc{stroke-dashoffset:120}
  .loader-eq i{transform:scaleY(.55)}
}

/* ============ ACTIVE NAV LINK ============ */
/* the page you are on keeps the gradient rule drawn, rather than only on hover */
.nav-links a[aria-current="page"]{color:var(--txt)}
.nav-links a[aria-current="page"]::after{transform:scaleX(1);transform-origin:left}
.nav-menu a[aria-current="page"]{color:var(--txt)}
.nav-menu a[aria-current="page"]::before{content:"";width:26px;height:1px;background:var(--grad);
  display:inline-block;vertical-align:middle;margin-right:14px}

/* ============ AUDIO LAB PAGE OPENER ============ */
/* the intro lines carry the page h1 on audio-lab.html — the heading must not
   bring its own type scale, the .intro-line clamp owns that */
.intro h1{font-size:inherit;font-weight:400;line-height:inherit}

/* ============ EXPLORE (HOME) ============ */
.explore{background:var(--coal);position:relative}
.explore-head{max-width:1460px;margin:0 auto 64px}
.explore-head h2{font-size:clamp(40px,5.6vw,92px);margin-top:26px}
.explore-grid{max-width:1460px;margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.ex-card{
  position:relative;display:block;padding:40px 34px 34px;border-radius:18px;
  border:1px solid var(--line);overflow:hidden;
  background:linear-gradient(180deg,rgba(28,28,38,.6),rgba(14,14,20,.92));
  transition:transform .5s var(--ease),border-color .4s,box-shadow .4s;
}
.ex-card:hover{transform:translateY(-8px);border-color:rgba(255,110,40,.55);
  box-shadow:0 18px 50px rgba(0,0,0,.5),0 0 30px rgba(255,60,25,.14)}
.ex-num{font-family:var(--f-mono);font-size:11.5px;letter-spacing:.28em;color:var(--dim)}
.ex-glowline{position:absolute;left:0;top:0;height:1px;width:100%;background:var(--grad);
  transform:scaleX(0);transform-origin:left;transition:transform .55s var(--ease)}
.ex-card:hover .ex-glowline{transform:scaleX(1)}
.ex-title{font-family:var(--f-display);text-transform:uppercase;font-weight:400;
  font-size:clamp(28px,2.6vw,42px);line-height:1.04;margin-top:18px}
.ex-desc{color:var(--dim);font-size:14px;margin-top:14px;max-width:34ch}
.ex-go{display:flex;align-items:center;gap:12px;margin-top:30px;
  font-family:var(--f-mono);font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--txt);font-weight:500;}
.ex-go i{width:30px;height:1px;background:var(--grad);transition:width .45s var(--ease)}
.ex-card:hover .ex-go i{width:52px}
@media (max-width:980px){.explore-grid{grid-template-columns:1fr}.ex-desc{max-width:none}}

/* ============ STORE "MORE IN STOCK" NOTES ============ */
/* the grid is a sample of the counter, not the catalogue — say so under the
   filters and again as the last tile, so it is visible in every category */
/* block, not flex: the inline <b> inside would otherwise become its own flex
   item and the sentence would break into columns */
.store-note{
  position:relative;padding-left:24px;margin-top:26px;max-width:720px;
  font-family:var(--f-mono);font-size:12.5px;line-height:1.9;letter-spacing:.1em;
  text-transform:uppercase;color:var(--dim);
}
.store-note::before{content:"";position:absolute;left:0;top:8px;width:8px;height:8px;border-radius:50%;
  background:var(--grad);box-shadow:0 0 10px rgba(255,80,25,.8)}
.store-note b{color:var(--txt);font-weight:500}
.prod-more{
  display:flex;flex-direction:column;justify-content:center;align-items:flex-start;
  padding:36px 30px;border-style:dashed;border-color:rgba(255,110,40,.4);
  background:radial-gradient(90% 80% at 50% 110%,rgba(255,60,25,.12),transparent 64%),var(--steel);
}
.prod-more .pm-cat{font-family:var(--f-mono);font-size:11px;letter-spacing:.22em;
  color:var(--dim);text-transform:uppercase;font-weight:500;}
.prod-more .pm-title{font-family:var(--f-display);text-transform:uppercase;font-weight:400;
  font-size:26px;line-height:1.1;margin-top:10px}
.prod-more .pm-desc{color:var(--dim);font-size:14px;margin-top:10px}
.prod-more .add-btn{margin-top:24px}

/* ============ RESPONSIVE REFINEMENTS ============ */

/* --- tablet and below: the desktop link row is gone, so the burger takes over --- */
@media (max-width:900px){
  .nav-burger{display:flex}
  .nav.menu-open{background:rgba(8,8,11,.94);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
  .nav.menu-open .nav-menu{display:block}
  .nav-inner{gap:14px}
  /* the panel duplicates the WhatsApp action, so the pill is redundant here */
  .nav-cta{display:none}
}

/* --- short / landscape viewports: the 420px floor on a 66vh panel burst the
       100vh stage, cutting titles and pushing the progress bar off-screen.
       The panel's content is all absolutely positioned, so it still needs an
       explicit height — just one that tracks the viewport instead of a floor. --- */
@media (max-height:620px){
  .hero-inner{padding:92px 24px 96px}
  .panel{height:72svh;min-height:0;width:min(460px,72vw)}
  .panel-body{bottom:20px;left:26px;right:26px}
  .panel-glowline{bottom:96px;left:26px;right:26px}
  .panel-ghost{font-size:clamp(56px,7vw,96px)}
  .statement-stage{height:100svh}
  .wavefield{height:100svh;min-height:0}
}

/* --- phones --- */
@media (max-width:700px){
  /* the hint sat on top of the hero buttons; its old rule was overridden by a
     later `display:flex`, so it has to be re-stated after that declaration */
  .scroll-hint{display:none}

  .hero-inner{padding:104px 22px 118px}
  .hero-sub{font-size:14.5px;margin-top:28px}
  .hero-ctas{margin-top:38px;gap:14px;width:100%}
  .hero-ctas .btn{width:100%;justify-content:center;padding:18px 24px;font-size:12px;letter-spacing:.14em}
  .hero-eq{height:64px;padding:0 4vw}
  .hero-label{letter-spacing:.3em;margin-bottom:26px}
  .hero-label::before,.hero-label::after{width:22px}

  .intro{padding:20vh 22px}
  .intro-note{margin-top:28px;letter-spacing:.24em}

  .audio-head{margin-bottom:56px}
  .audio-grid{gap:48px}
  .audio-lede,.store-lede,.contact-lede,.page-lede{font-size:14.5px}

  .explore-head{margin-bottom:44px}
  .ex-card{padding:32px 26px 28px}
  .store-note{letter-spacing:.08em;line-height:1.8}

  .lab-frame{padding:26px 18px}
  .lab-status{gap:10px;font-size:11px;letter-spacing:.12em}
  .lab-grid{gap:40px;padding-top:34px}
  .knobs{gap:26px}

  .cmp-stage{height:52vh;min-height:320px}
  .cmp-label{top:16px;font-size:11px;letter-spacing:.16em;padding:8px 13px}
  .cmp-label.before{left:14px}
  .cmp-label.after{right:14px}
  .cmp-handle::after{width:46px;height:46px;font-size:12px}
  .cmp-hint{letter-spacing:.26em}

  .contact-grid{margin-top:60px}
  .c-item{padding:26px 22px}

  footer{padding:28px 22px 0;letter-spacing:.18em}
  .footer-row{gap:12px}
  .footer-base{justify-content:center;text-align:center;letter-spacing:.16em;padding-bottom:28px}
  .footer-base.fab-clear{padding-bottom:94px}
}

/* --- narrow phones: the logo + pill genuinely stopped fitting side by side --- */
@media (max-width:420px){
  .nav-inner{padding:14px 18px}
  .nav-logo img{height:48px}

  .section-pad{padding:84px 18px}
  .mods-head{padding:96px 18px 50px}
  .intro{padding:18vh 18px}

  /* tag + 26px gap was eating 100px of a 375px row, crushing the headings */
  .service{padding:26px 4px}
  .service.active{padding-left:14px}
  .service-row{flex-direction:column;gap:9px;align-items:flex-start}
  .service-tag{min-width:0}
  .service-desc{font-size:14px}

  .cta-big{padding:22px 30px;font-size:12.5px;letter-spacing:.14em;gap:13px;margin-top:44px;max-width:100%}
  .chips{gap:9px;margin-top:30px}
  .chip{padding:10px 15px;font-size:11.5px;letter-spacing:.1em}
  .prod-visual{height:180px}
  .prod-ring{width:126px;height:126px}

  .cart-fab{right:18px;bottom:18px;width:54px;height:54px}
  .cart-fab svg{width:21px;height:21px}
  .wa-fab svg{width:27px;height:27px}
  .cart-toast{bottom:88px;font-size:11.5px;padding:11px 18px;max-width:calc(100vw - 36px);text-align:center}
}

/* --- touch devices: hover-only content is unreachable, so reveal it --- */
@media (pointer:coarse){
  .panel-desc{opacity:1;transform:none}
  .cursor-dot,.cursor-ring{display:none}
}

/* ============ REDUCED MOTION ============ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001s!important;animation-iteration-count:1!important;transition-duration:.001s!important}
  .scroll-hint::after,.lab-scan,.pulse-rings span{animation:none}
}

/* ============ GALLERY ============ */
.gallery{position:relative;background:linear-gradient(180deg,var(--void),var(--coal) 40%,var(--void));padding-top:170px}
.gallery-head{max-width:1460px;margin:0 auto 60px}
.gallery-head h1{font-size:clamp(44px,6.6vw,110px);margin-top:26px}
.gallery-lede{max-width:620px;margin-top:28px;color:var(--dim);font-size:15px;font-weight:500}
.gallery-lede a{color:var(--txt);border-bottom:1px solid rgba(255,90,35,.5)}
/* every photo is a 9:16 phone shot, so tiles are portrait; a g-feature fills a 2x2
   block, and the markup order is laid out so five columns come out gap-free. The
   sources are 630px wide, so features drop back to single tiles once they'd upscale. */
.gallery-grid{max-width:1460px;margin:0 auto;display:grid;grid-template-columns:repeat(5,1fr);grid-auto-flow:dense;gap:18px}
.g-item,.reel-item{position:relative;overflow:hidden;border-radius:18px;border:1px solid var(--line);background:var(--coal)}
.g-item{aspect-ratio:3/4}
.g-item.g-feature{grid-column:span 2;grid-row:span 2;aspect-ratio:auto}
.g-item img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;transition:transform .9s var(--ease),filter .6s}
.g-item::after,.reel-item::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(5,5,10,.85));pointer-events:none}
.g-item figcaption,.reel-item figcaption{position:absolute;left:22px;right:16px;bottom:18px;z-index:1;font-family:var(--f-mono);font-size:12.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--txt);font-weight:500;}
.g-item:hover img{transform:scale(1.06)}
.reel-title{font-family:var(--f-display);font-weight:400;text-transform:uppercase;line-height:1;font-size:clamp(26px,3vw,44px)}
.gallery-sub{max-width:1460px;margin:0 auto 24px}

/* video reel: one clip plays at a time and hands over to the next when it ends */
.reel{max-width:1460px;margin:0 auto 110px}
.reel-head{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:24px}
.reel-nav{display:flex;gap:10px}
.reel-arrow{
  width:50px;height:50px;border-radius:50%;display:grid;place-items:center;color:var(--txt);
  border:1px solid rgba(255,90,35,.55);background:rgba(11,11,18,.62);
  transition:background .35s,box-shadow .35s,border-color .35s,opacity .35s;
}
.reel-arrow svg{width:20px;height:20px}
.reel-arrow:hover{background:var(--grad);border-color:transparent;box-shadow:0 0 30px rgba(255,60,25,.5)}
.reel-arrow:disabled{opacity:.3;pointer-events:none}
.reel-track{
  position:relative;display:grid;grid-auto-flow:column;grid-auto-columns:clamp(210px,22vw,300px);gap:18px;
  overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none;
}
.reel-track::-webkit-scrollbar{display:none}
.reel-item{aspect-ratio:9/16;scroll-snap-align:start;transition:border-color .4s,box-shadow .4s}
.reel-item video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.reel-item.is-playing{border-color:rgba(255,90,35,.6);box-shadow:0 18px 44px rgba(255,60,25,.18)}
.reel-play{
  position:absolute;top:50%;left:50%;z-index:2;width:58px;height:58px;margin:-29px 0 0 -29px;border-radius:50%;
  display:grid;place-items:center;color:#fff;background:rgba(11,11,18,.55);border:1px solid rgba(255,255,255,.3);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);pointer-events:none;
  transition:opacity .4s,transform .4s var(--ease);
}
.reel-play svg{width:22px;height:22px;margin-left:3px}
.reel-item.is-playing .reel-play{opacity:0;transform:scale(.8)}
.reel-sound{
  position:absolute;top:12px;right:12px;z-index:3;width:38px;height:38px;border-radius:50%;
  display:grid;place-items:center;color:#fff;background:rgba(11,11,18,.55);border:1px solid rgba(255,255,255,.25);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);transition:border-color .3s;
}
.reel-sound svg{width:18px;height:18px}
.reel-sound .i-on,.reel-sound[aria-pressed="true"] .i-off{display:none}
.reel-sound[aria-pressed="true"] .i-on{display:block}
.reel-sound[aria-pressed="true"]{border-color:rgba(255,90,35,.75)}
.reel-bar{position:absolute;left:14px;right:14px;bottom:10px;z-index:2;height:2px;border-radius:2px;overflow:hidden;background:rgba(255,255,255,.18);opacity:0;transition:opacity .4s}
.reel-bar i{display:block;height:100%;background:var(--grad);transform-origin:left;transform:scaleX(0)}
.reel-item.is-playing .reel-bar{opacity:1}
.reel-item figcaption{bottom:24px}
@media (max-width:1200px){
  .gallery-grid{grid-template-columns:repeat(4,1fr)}
  .g-item.g-feature{grid-column:auto;grid-row:auto;aspect-ratio:3/4}
}
@media (max-width:900px){
  .gallery{padding-top:130px}
  .gallery-grid{grid-template-columns:1fr 1fr;gap:12px}
  .reel{margin-bottom:80px}
  .reel-track{gap:12px;grid-auto-columns:clamp(180px,42vw,260px)}
}
@media (max-width:600px){
  .gallery-grid{gap:10px}
  .g-item,.reel-item{border-radius:14px}
  .g-item figcaption,.reel-item figcaption{left:14px;right:10px;bottom:12px;font-size:10.5px;letter-spacing:.14em}
  .reel-item figcaption{bottom:20px}
  .reel-arrow{width:42px;height:42px}
  .reel-arrow svg{width:17px;height:17px}
}

/* ============ ACCESSORY TILES: ICON + ARROWS ============ */
/* icon badge and glow line share a row at the top of the text block, so a
   two-line title pushes them up instead of running into them */
.panel-meta{display:flex;align-items:center;gap:16px;margin-bottom:18px}
.panel-body .panel-glowline{position:static;flex:1;left:auto;right:auto;bottom:auto}
.panel-icon{
  flex:0 0 auto;width:50px;height:50px;border-radius:50%;
  display:grid;place-items:center;color:var(--amber);
  border:1px solid rgba(255,110,40,.45);
  background:radial-gradient(circle at 50% 35%,rgba(255,90,30,.22),rgba(12,12,18,.55) 70%);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  box-shadow:0 0 22px rgba(255,70,25,.25),inset 0 0 12px rgba(255,120,40,.12);
  transition:transform .5s var(--ease),box-shadow .5s,color .4s;
}
.panel-icon svg{width:24px;height:24px}
.panel:hover .panel-icon{transform:rotate(-8deg) scale(1.08);color:var(--txt);box-shadow:0 0 30px rgba(255,70,25,.5),inset 0 0 14px rgba(255,120,40,.2)}

.mods-stage{position:relative}
.mods-arrow{
  position:absolute;top:calc(50% - 20px);z-index:5;transform:translateY(-50%);
  width:58px;height:58px;border-radius:50%;display:grid;place-items:center;
  color:var(--txt);cursor:pointer;
  border:1px solid rgba(255,90,35,.55);
  background:rgba(11,11,18,.62);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  box-shadow:0 10px 30px rgba(0,0,0,.45);
  transition:background .35s,box-shadow .35s,border-color .35s,transform .35s var(--ease);
}
.mods-arrow svg{width:22px;height:22px;transition:transform .35s var(--ease)}
.mods-prev{left:clamp(12px,2vw,32px)}
.mods-next{right:clamp(12px,2vw,32px)}
.mods-arrow:hover{background:var(--grad);border-color:transparent;box-shadow:0 0 30px rgba(255,60,25,.5)}
.mods-prev:hover svg{transform:translateX(-3px)}
.mods-next:hover svg{transform:translateX(3px)}
.mods-arrow:active{transform:translateY(-50%) scale(.92)}
@media (max-width:600px){
  .mods-arrow{width:44px;height:44px}
  .mods-arrow svg{width:18px;height:18px}
  .panel-icon{width:42px;height:42px}
  .panel-icon svg{width:20px;height:20px}
}

/* ============ ACCESSORIES PAGE: FULL GRID ============ */
/* accessories.html lists every category at once instead of the home-page
   marquee. A 6-column base gives a 2 / 3 / 3 / 2 rhythm for the ten tiles. */
.mods-grid{
  position:relative;z-index:1;max-width:1460px;margin:0 auto;padding:0 40px 60px;
  display:grid;grid-template-columns:repeat(6,1fr);gap:26px;
  grid-auto-rows:clamp(420px,36vw,540px);
}
.mods-grid .panel{width:auto;height:auto;min-height:0;grid-column:span 2}
.mods-grid .panel:nth-child(-n+2),.mods-grid .panel:nth-last-child(-n+2){grid-column:span 3}
.mods-grid .panel-desc{opacity:1;transform:none}
.mods-grid .panel-ghost{font-size:clamp(70px,7vw,120px)}
@media (max-width:1100px){
  .mods-grid{grid-auto-rows:clamp(400px,52vw,520px)}
  .mods-grid .panel,.mods-grid .panel:nth-child(-n+2),.mods-grid .panel:nth-last-child(-n+2){grid-column:span 3}
}
@media (max-width:640px){
  .mods-grid{grid-template-columns:1fr;grid-auto-rows:auto;gap:18px;padding:0 18px 40px}
  .mods-grid .panel,.mods-grid .panel:nth-child(-n+2),.mods-grid .panel:nth-last-child(-n+2){grid-column:auto;aspect-ratio:4/5}
}

/* ============ AUDIO BRANDS inside the service list ============ */
/* the open row holds a line of copy plus the brand chips, so it needs more
   room than the original 120px one-liner */
.service.active .service-desc{max-height:320px}
.brand-list{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.brand-list li{
  font-family:var(--f-mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;
  color:rgba(242,240,235,.92);padding:7px 11px;border-radius:999px;
  border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.025);
  transition:color .3s,border-color .3s,background .3s;font-weight:500;
}
.brand-list li:hover{color:var(--txt);border-color:rgba(255,110,40,.55);background:rgba(255,70,25,.08)}
/* accessories: every chip is a tap-to-enquire toggle */
#rangeGrid .brand-list li{cursor:pointer;user-select:none;-webkit-tap-highlight-color:transparent;
  display:inline-flex;align-items:center;gap:6px}
#rangeGrid .brand-list li::before{content:"+";font-size:13px;line-height:1;color:var(--amber);transition:color .3s}
#rangeGrid .brand-list li:focus-visible{outline:2px solid var(--amber);outline-offset:2px}
#rangeGrid .brand-list li.picked{color:#0a0503;background:var(--grad);border-color:transparent;
  box-shadow:0 0 16px rgba(255,70,25,.35)}
#rangeGrid .brand-list li.picked::before{content:"\2713";color:#0a0503}

/* ============ AUDIO LAB: product image per service row ============ */
/* a small thumb closes each row; opening the row grows it to full size beside
   the copy. The image spans both grid rows, and the 1fr second row soaks up
   any height it adds, so the heading never drifts down while it grows. */
.services.has-media{container-type:inline-size}
.services.has-media .service{
  display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto 1fr;
  grid-template-areas:"row media" "desc media";column-gap:32px;align-items:start;
}
.services.has-media .service-row{grid-area:row}
.services.has-media .service-desc{grid-area:desc}
.service-media{
  grid-area:media;position:relative;margin:0;width:56px;aspect-ratio:1;border-radius:50%;overflow:hidden;
  background:#000;border:1px solid var(--line);filter:grayscale(.45) brightness(.78);
  transition:width .6s var(--ease),filter .5s,border-color .5s,box-shadow .6s var(--ease);
}
/* the thumb is zoomed onto the product; the full ring artwork turns into view as it opens */
.service-media img{
  width:100%;height:100%;object-fit:cover;display:block;
  transform:scale(1.35) rotate(-10deg);transition:transform .8s var(--ease),opacity .5s;
}
/* loading: an amber arc turns in the empty circle until the image arrives
   (kubix.js sets .is-loading), then the image fades in over it. The spin is
   paused rather than removed so the arc doesn't snap back as it fades. */
.service-media::after{
  content:"";position:absolute;inset:24%;border-radius:50%;pointer-events:none;
  background:conic-gradient(transparent 30%,var(--amber));
  -webkit-mask:radial-gradient(farthest-side,transparent calc(96% - 2px),#000 calc(100% - 2px));
          mask:radial-gradient(farthest-side,transparent calc(96% - 2px),#000 calc(100% - 2px));
  opacity:0;transition:opacity .3s;animation:spin .9s linear infinite paused;
}
.service-media.is-loading::after{opacity:1;animation-play-state:running}
.service-media.is-loading img,.service-media.is-broken img{opacity:0}
.service.active .service-media{
  width:clamp(140px,13vw,200px);filter:none;border-color:rgba(255,110,40,.4);
  box-shadow:0 0 44px rgba(255,60,25,.26);
}
.service.active .service-media img{transform:none}
/* a narrow list (phones, and the 1000-1400px desktops where the canvas takes
   540px) can't fit the copy beside a full-size image, so the image stays by the
   heading, the tag stacks over the name and the copy takes the full width */
@container (max-width:620px){
  .services.has-media .service{grid-template-areas:"row media" "desc desc";column-gap:18px}
  .services.has-media .service-row{align-self:center;flex-direction:column;gap:9px;align-items:flex-start}
  .services.has-media .service-tag{min-width:0}
  .services.has-media .service-desc{padding-left:0}
  .service-media{width:46px}
  .service.active .service-media{width:clamp(96px,30cqi,150px)}
}
@media (prefers-reduced-motion:reduce){.service-media,.service-media img{transition:none}}

/* ============ ACCESSORIES PAGE: FULL RANGE ============ */
.range{position:relative;background:linear-gradient(180deg,var(--void),var(--coal))}
.range+.mods{border-top:1px solid var(--line)}
.range-head{max-width:1460px;margin:0 auto 70px}
.range-head h1,.range-head h2{font-size:clamp(44px,6.6vw,110px);margin-top:26px}
.range-lede{max-width:640px;margin-top:30px;color:var(--dim);font-size:15px;font-weight:500}
.range-grid{max-width:1460px;margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);gap:22px;align-items:start}
@media (max-width:1100px){.range-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:680px){.range-grid{grid-template-columns:1fr;gap:16px}}
.range-card{
  position:relative;overflow:hidden;padding:30px 28px 30px;border-radius:18px;border:1px solid var(--line);
  background:radial-gradient(120% 70% at 100% 0%,rgba(255,70,25,.10),transparent 60%),linear-gradient(180deg,var(--steel),rgba(11,11,18,.9));
  transition:border-color .4s,box-shadow .5s;scroll-margin-top:100px;
}
.range-card::before{ /* glow line across the top on hover */
  content:"";position:absolute;left:0;top:0;height:1px;width:100%;
  background:var(--grad);box-shadow:0 0 14px rgba(255,90,30,.8);
  transform:scaleX(0);transform-origin:left;transition:transform .6s var(--ease);
}
.range-card:hover{border-color:rgba(255,110,40,.45);box-shadow:0 18px 40px rgba(0,0,0,.35)}
.range-card:hover::before{transform:scaleX(1)}
.range-card:hover .panel-icon{transform:rotate(-8deg) scale(1.08);color:var(--txt)}
.range-top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.range-num{font-family:var(--f-mono);font-size:12px;letter-spacing:.18em;color:var(--dim)}
.range-title{margin-top:22px;font-family:var(--f-display);font-weight:400;text-transform:uppercase;font-size:clamp(26px,2.2vw,36px);line-height:1.05}
.range-note{margin-top:10px;color:var(--dim);font-size:14px;line-height:1.55}
.range-card .brand-list{margin-top:22px;padding-top:20px;border-top:1px solid var(--line)}
@media (max-width:420px){.range-card{padding:24px 20px}}