/* =========================================================
   Artem Sokolov — Sound Engineer
   Minimal / editorial / monochrome + one ember accent
   ========================================================= */

:root{
  --bg:        #0A0A0A;
  --bg-2:      #101011;
  --fg:        #F2F0EC;
  --muted:     #8B8780;
  --faint:     #575450;
  --line:      rgba(242,240,236,.12);
  --line-soft: rgba(242,240,236,.06);
  --accent:    #D9583C;

  --sans: "Helvetica Neue", Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace;

  --pad: clamp(20px, 5vw, 80px);
  --sec: clamp(96px, 13vw, 200px);
  --ease: cubic-bezier(.22,1,.36,1);
  --nav-h: 76px;
}

*,*::before,*::after{ box-sizing:border-box; }

html{
  scroll-behavior:smooth;
  scroll-padding-top:var(--nav-h);
  -webkit-text-size-adjust:100%;
}

body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font-family:var(--sans);
  font-size:clamp(15px,1.05vw,17px);
  line-height:1.62;
  letter-spacing:-.01em;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}

/* subtle film grain over the whole page */
body::after{
  content:"";
  position:fixed; inset:-50%;
  pointer-events:none; z-index:9999;
  opacity:.028;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>");
}

img{ display:block; max-width:100%; height:auto; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
::selection{ background:var(--accent); color:#fff; }

:focus-visible{ outline:1px solid var(--accent); outline-offset:4px; }

.container{
  width:100%;
  max-width:1440px;
  margin-inline:auto;
  padding-inline:var(--pad);
}

.section{ padding-block:var(--sec); position:relative; }

/* ── shared type ───────────────────────────────────────── */
.label,.eyebrow,.meta{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--muted);
}

.sec-head{ margin-bottom:clamp(48px,7vw,96px); }
.sec-head .label{ display:block; margin-bottom:clamp(20px,3vw,36px); }

.sec-title{
  margin:0;
  font-size:clamp(34px,5.2vw,76px);
  line-height:1.02;
  letter-spacing:-.045em;
  font-weight:500;
}

.lead{
  font-size:clamp(19px,2.1vw,30px);
  line-height:1.4;
  letter-spacing:-.03em;
  font-weight:400;
}

.credits-link{
  display:inline-flex; align-items:center; gap:8px;
  margin-top:clamp(18px,2.4vw,28px);
  font-family:var(--mono); font-size:11px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--muted);
  transition:color .35s;
}
.credits-link:hover{ color:var(--accent); }
.credits-link svg,.credits-link span{ transition:transform .35s var(--ease); }
.credits-link:hover span{ transform:translate(2px,-2px); }

/* ── genre filter (Credits section) ───────────────────────── */
.genre-filter{
  display:flex; flex-wrap:wrap; gap:10px;
  margin-bottom:clamp(28px,4vw,44px);
}
.genre-filter__btn{
  display:inline-flex; align-items:center; gap:7px;
  padding:9px 16px;
  border-radius:100px;
  border:1px solid var(--line);
  font-family:var(--mono); font-size:11px;
  letter-spacing:.1em; text-transform:uppercase; color:var(--muted);
  transition:color .3s, border-color .3s, background .3s;
}
.genre-filter__btn span{
  font-size:9px; color:var(--faint);
  transition:color .3s;
}
.genre-filter__btn:hover{ color:var(--fg); border-color:rgba(242,240,236,.35); }
.genre-filter__btn.is-active{
  background:var(--fg); color:var(--bg); border-color:var(--fg);
}
.genre-filter__btn.is-active span{ color:rgba(10,10,10,.55); }

.genre-filter__empty{
  margin:0 0 clamp(28px,4vw,44px);
  font-family:var(--mono); font-size:12px;
  letter-spacing:.06em; color:var(--faint);
}

/* rows leaving/entering the current filter — quick fade+collapse
   rather than an abrupt visibility snap */
.row.is-filtered{
  display:none;
}

/* rows 31–265: collapsed until the show-all toggle opens the list.
   An active search overrides the collapse — it scans the whole
   catalogue, so matches behind the toggle must be able to surface. */
.rows:not(.is-open):not(.is-searching) .row.is-extra{ display:none; }

.rows-toggle{
  display:flex;
  margin:clamp(30px,4vw,48px) auto 0;
}
/* expand/collapse is meaningless mid-search — the query decides */
.rows.is-searching + .rows-toggle{ display:none; }

/* search input, trailing the genre pills */
.row-search{
  flex:1 1 220px; max-width:320px;
  margin-left:auto;
  background:transparent;
  border:0; border-bottom:1px solid var(--line);
  border-radius:0;
  padding:8px 0;
  color:var(--fg);
  font:inherit; font-size:14px;
  transition:border-color .4s;
}
.row-search::placeholder{ color:var(--faint); }
.row-search:focus{ outline:none; border-bottom-color:var(--fg); }
.row-search::-webkit-search-cancel-button{ -webkit-appearance:none; }
@media (max-width:640px){
  .row-search{ flex-basis:100%; max-width:none; margin-left:0; margin-top:8px; }
}

/* rows with no Muso preview keep the grid shape, minus the invitation */
.row__btn[disabled]{ opacity:.22; pointer-events:none; }

/* ── buttons ───────────────────────────────────────────── */
.btn{
  --b-fg:var(--fg);
  position:relative;
  display:inline-flex; align-items:center; gap:12px;
  padding:15px 30px;
  border-radius:100px;
  font-size:14px; font-weight:500; letter-spacing:.01em;
  overflow:hidden;
  isolation:isolate;
  transition:color .45s var(--ease), border-color .45s var(--ease);
}
.btn svg{ width:8px; height:10px; fill:currentColor; transition:transform .45s var(--ease); }
.btn::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:var(--fg);
  transform:translateY(101%);
  transition:transform .55s var(--ease);
}
.btn:hover::before{ transform:translateY(0); }
.btn:hover svg{ transform:translateX(3px); }

.btn--solid{ background:var(--fg); color:var(--bg); }
.btn--solid::before{ background:var(--accent); }
.btn--solid:hover{ color:#fff; }

.btn--ghost{ border:1px solid var(--line); }
.btn--ghost:hover{ color:var(--bg); border-color:var(--fg); }

/* ── nav ───────────────────────────────────────────────── */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:100;
  height:var(--nav-h);
  display:flex; align-items:center;
  transition:background .5s var(--ease), border-color .5s var(--ease), backdrop-filter .5s;
  border-bottom:1px solid transparent;
}
.nav.is-stuck{
  background:rgba(10,10,10,.72);
  backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  border-bottom-color:var(--line-soft);
}
.nav__inner{
  width:100%; max-width:1440px; margin-inline:auto;
  padding-inline:var(--pad);
  display:flex; align-items:center; justify-content:space-between; gap:24px;
}
.nav__brand{
  display:inline-flex; align-items:center; gap:10px;
  font-size:15px; letter-spacing:.02em;
}
.nav__mark{
  width:7px; height:7px; border-radius:50%;
  background:var(--fg);
  transition:background .4s, transform .4s var(--ease);
}
.nav__brand:hover .nav__mark{ background:var(--accent); transform:scale(1.5); }

.nav__links{ display:flex; gap:clamp(20px,3vw,44px); }
.nav__links a{
  position:relative;
  font-size:15px;
  color:var(--muted);
  transition:color .35s;
}
.nav__links a::after{
  content:""; position:absolute; left:0; bottom:-5px;
  width:100%; height:1px; background:var(--fg);
  transform:scaleX(0); transform-origin:right;
  transition:transform .45s var(--ease);
}
.nav__links a:hover{ color:var(--fg); }
.nav__links a:hover::after{ transform:scaleX(1); transform-origin:left; }
.nav__links a.is-active{ color:var(--fg); }

.nav__actions{ display:flex; align-items:center; gap:12px; }

/* language switcher */
.lang{ display:flex; align-items:center; gap:2px; margin-right:6px; }
.lang__btn{
  padding:6px 7px;
  font-family:var(--mono); font-size:11px;
  letter-spacing:.08em; color:var(--faint);
  transition:color .3s;
}
.lang__btn:hover{ color:var(--muted); }
.lang__btn.is-active{ color:var(--fg); }
.lang--menu{ margin:26px 0 0; gap:10px; }
.lang--menu .lang__btn{ font-size:14px; padding:8px 10px; }

.nav__cta{
  position:relative;
  display:inline-flex; align-items:center;
  padding:10px 20px;
  border-radius:100px;
  background:var(--fg); color:var(--bg);
  font-size:15px; font-weight:500; letter-spacing:-.005em;
  overflow:hidden; isolation:isolate;
  transition:color .4s var(--ease), border-color .4s;
}
.nav__cta span{ position:relative; z-index:1; }
.nav__cta::before{
  content:""; position:absolute; inset:0; z-index:0;
  background:var(--accent);
  transform:translateY(101%);
  transition:transform .45s var(--ease);
}
.nav__cta:hover{ color:#fff; }
.nav__cta:hover::before{ transform:translateY(0); }
.nav__cta:active{ transform:scale(.96); }

.nav__cta--ghost{
  background:transparent; color:var(--muted);
  border:1px solid var(--line);
}
.nav__cta--ghost:hover{ color:#fff; border-color:transparent; }

/* already the hover colour by default — the sliding ::before layer
   would be invisible against a same-colour background, so it's turned
   off here and swapped for a plain brightness lift instead */
.nav__cta--accent{ background:var(--accent); color:#fff; }
.nav__cta--accent::before{ content:none; }
.nav__cta--accent:hover{ color:#fff; filter:brightness(1.1); }

.nav__burger{ display:none; width:28px; height:28px; position:relative; }
.nav__burger span{
  position:absolute; left:3px; right:3px; height:1px; background:var(--fg);
  transition:transform .4s var(--ease), opacity .3s;
}
.nav__burger span:first-child{ top:11px; }
.nav__burger span:last-child{ top:17px; }
.nav__burger[aria-expanded="true"] span:first-child{ transform:translateY(3px) rotate(45deg); }
.nav__burger[aria-expanded="true"] span:last-child{ transform:translateY(-3px) rotate(-45deg); }

.menu{
  position:fixed; inset:0; z-index:99;
  background:var(--bg);
  display:flex; flex-direction:column; justify-content:center; gap:6px;
  padding:0 var(--pad);
  opacity:0; transition:opacity .4s var(--ease);
}
/* the class rule above would otherwise beat the UA's [hidden]{display:none}
   and leave an invisible full-screen overlay swallowing every click */
.menu[hidden]{ display:none; }
.menu.is-open{ opacity:1; }
.menu a{
  font-size:clamp(34px,10vw,56px);
  letter-spacing:-.045em; line-height:1.28;
}
.menu__actions{
  display:flex; flex-wrap:wrap; gap:14px;
  margin-top:28px;
}
@media (max-width:480px){
  .menu__actions{ gap:12px; }
  .menu__cta{ flex:1 1 100%; justify-content:center; }
}
.menu__cta{
  display:inline-flex; align-items:center;
  padding:15px 30px;
  border-radius:100px;
  background:var(--fg); color:var(--bg);
  font-size:17px; font-weight:500; letter-spacing:-.005em;
  transition:transform .3s var(--ease), background .3s, border-color .3s, color .3s;
}
.menu__cta:active{ transform:scale(.96); background:var(--accent); color:#fff; }

.menu__cta--ghost{
  background:transparent; color:var(--fg);
  border:1px solid var(--line);
}
.menu__cta--ghost:active{ background:var(--accent); border-color:var(--accent); }

.menu__cta--accent{ background:var(--accent); color:#fff; }
.menu__mail{
  margin-top:36px;
  font-family:var(--mono); font-size:12px;
  letter-spacing:.1em; color:var(--muted);
}

/* ── hero ──────────────────────────────────────────────── */
.hero{
  position:relative;
  min-height:100svh;
  padding-top:calc(var(--nav-h) + 4vh);
  padding-bottom:88px;
  display:flex; flex-direction:column; justify-content:center;
}
.hero__grid{
  flex:1;
  width:100%; max-width:1440px; margin-inline:auto;
  padding-inline:var(--pad);
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:clamp(32px,5vw,80px);
  align-items:center;
}

.hero__text .eyebrow{ display:block; margin-bottom:clamp(20px,3vw,32px); }

.hero__title{
  --lh:1.05;
  --line-pad:.04em;
  margin:0;
  font-size:clamp(48px,8.7vw,138px);
  line-height:var(--lh);
  letter-spacing:-.055em;
  font-weight:500;
}
.hero__title .line{ display:block; overflow:hidden; padding-bottom:var(--line-pad); }
.hero__title .reveal-line{
  display:block;
  transform:translateY(105%);
  transition:transform 1.15s var(--ease);
}
.hero__title .line:nth-child(2) .reveal-line{ transition-delay:.09s; }
.is-loaded .hero__title .reveal-line{ transform:translateY(0); }

/* ── the name resolving out of a waveform ────────────────────────
   A playhead sweeps the title box and the letters materialise in its
   wake, the bars collapsing to the centreline behind it — the same
   read as the players further down the page, which is where the bar
   idiom and the accent playhead come from.

   The reveal is a mask wipe driven by --wave, which the canvas loop
   sets every frame, so the edge of the text and the playhead are the
   same number and cannot drift apart. Feathered by 14% so letters
   surface through a soft edge instead of a hard cut.

   .is-emerging is added by JS and removed when the intro ends, so
   without JS (or with reduced motion) there is no mask at all and the
   name just does its normal rise. It also parks the rise transform:
   the two entrances must not both play. */
.hero__title.is-emerging{
  --wave:0;
  -webkit-mask-image:linear-gradient(90deg,
    #000 calc(var(--wave) * 114% - 14%), rgba(0,0,0,0) calc(var(--wave) * 114%));
  mask-image:linear-gradient(90deg,
    #000 calc(var(--wave) * 114% - 14%), rgba(0,0,0,0) calc(var(--wave) * 114%));
}
.hero__title.is-emerging .reveal-line{ transform:none; transition:none; }

.hero__titlewrap{ position:relative; }
.hero__wave{
  position:absolute; inset:0;
  width:100%; height:100%;
  pointer-events:none;
  opacity:0;                 /* the loop fades it in; it can never hide the name */
  transition:opacity .45s linear;
}

.hero__intro{
  margin:clamp(24px,3.4vw,40px) 0 0;
  max-width:26ch;
  font-size:clamp(17px,1.6vw,22px);
  line-height:1.45;
  letter-spacing:-.025em;
  color:var(--fg);
}
.hero__cta{ display:flex; flex-wrap:wrap; gap:12px; margin-top:clamp(28px,4vw,48px); }

/* ── hero slider (Instagram-story style) ───────────────── */
.hero__media{
  position:relative; margin:0;
  width:100%;                      /* pin the width — otherwise aspect-ratio
                                       + max-height can shrink it below the
                                       grid column instead of just cropping */
  aspect-ratio:1/1;
  max-height:74svh;
  overflow:hidden;
  background:var(--bg-2);
  opacity:0;
  transition:opacity 1.4s ease;
  touch-action:pan-y;              /* let vertical page scroll through */
}
.is-loaded .hero__media{ opacity:1; }

.slider__track{
  display:flex; height:100%;
  will-change:transform;
  transition:transform .62s var(--ease);
}
.slider__track.is-dragging{ transition:none; }

.slider__slide{ flex:0 0 100%; height:100%; overflow:hidden; }
.slider__slide img{
  width:100%; height:100%;
  object-fit:cover; object-position:50% 50%;
  filter:grayscale(1) contrast(1.22) brightness(.82);
  transform:scale(1.12);
  transition:transform 1.9s var(--ease);
  -webkit-user-drag:none; user-select:none; pointer-events:none;
}
.is-loaded .slider__slide img{ transform:scale(1); }

.hero__media::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(180deg,rgba(10,10,10,.42) 0%,rgba(10,10,10,0) 34%,rgba(10,10,10,.62) 100%);
}

/* segmented progress bars, like stories */
.slider__bars{
  position:absolute; top:12px; left:12px; right:12px; z-index:3;
  display:flex; gap:5px;
}
.slider__bars span{
  flex:1; height:2px; border-radius:2px;
  background:rgba(242,240,236,.28);
  overflow:hidden;
}
.slider__bars i{ display:block; height:100%; width:0; background:var(--fg); }
.slider__bars span.is-done i{ width:100%; }
.slider__bars span.is-active i{ animation:barFill var(--slide-dur,5s) linear forwards; }
.hero__media.is-paused .slider__bars span.is-active i{ animation-play-state:paused; }
@keyframes barFill{ from{ width:0; } to{ width:100%; } }

/* arrows — desktop affordance, hidden until hover */
.slider__nav{
  /* the negative margin is what centres it vertically — derived from the
     size so the two can't drift apart. transform is spoken for by the
     reveal and press states, so translateY(-50%) isn't available here */
  --size:52px;
  position:absolute; top:50%; z-index:3;
  width:var(--size); height:var(--size); margin-top:calc(var(--size) / -2);
  display:grid; place-items:center;
  border-radius:50%;
  background:rgba(11,11,12,.45);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  border:1px solid rgba(242,240,236,.16);
  color:var(--fg); font-size:32px; line-height:1;
  opacity:0; transform:scale(.9);
  transition:opacity .35s var(--ease), transform .35s var(--ease), background .3s;
}
.slider__nav--prev{ left:12px; }
.slider__nav--next{ right:12px; }
.hero__media:hover .slider__nav{ opacity:1; transform:none; }
.slider__nav:hover{ background:rgba(11,11,12,.75); }
.slider__nav:active{ transform:scale(.92); }

.hero__media figcaption{
  position:absolute; left:16px; bottom:14px; z-index:3;
  font-family:var(--mono); font-size:10px;
  letter-spacing:.16em; text-transform:uppercase;
  color:rgba(242,240,236,.72);
}

@media (hover:none){
  .slider__nav{ display:none; }   /* swipe is the gesture on touch */
}

.hero__foot{
  width:100%; max-width:1440px; margin-inline:auto;
  padding-inline:var(--pad);
  margin-top:clamp(28px,4vw,48px);
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  opacity:0; transform:translateY(14px);
  transition:opacity 1s ease .9s, transform 1s var(--ease) .9s;
}
.is-loaded .hero__foot{ opacity:1; transform:none; }

.scroll{
  display:inline-flex; align-items:center; gap:12px;
  font-family:var(--mono); font-size:11px;
  letter-spacing:.16em; text-transform:uppercase; color:var(--muted);
  transition:color .35s;
}
.scroll:hover{ color:var(--fg); }
.scroll__line{ display:block; width:56px; height:1px; background:var(--line); position:relative; overflow:hidden; }
.scroll__line::after{
  content:""; position:absolute; inset:0; background:var(--fg);
  transform:translateX(-100%);
  animation:sweep 2.6s var(--ease) infinite;
}
@keyframes sweep{
  0%{ transform:translateX(-100%); }
  55%{ transform:translateX(0); }
  100%{ transform:translateX(100%); }
}

/* ── about ─────────────────────────────────────────────── */
.about__grid{
  display:grid;
  grid-template-columns:1fr .82fr;
  gap:clamp(40px,7vw,120px);
  align-items:start;
}
.about__copy p{ max-width:52ch; color:var(--muted); }
.about__copy .lead{ color:var(--fg); margin-bottom:1.6em; }
/* the headings carry the structure now, so the list stays plain —
   bordering every one of them would over-rule the column */
/* no text-transform: the client's capitalisation is part of the copy */
.about__h{
  margin:clamp(34px,4vw,48px) 0 clamp(12px,1.4vw,18px);
  font-size:clamp(17px,1.5vw,21px);
  letter-spacing:-.02em; line-height:1.25;
  color:var(--fg); font-weight:500;
}
.about__h + p{ margin-top:0; }

.about__list{
  margin:0; padding:0;
  list-style:none;
  display:grid; gap:12px;
  color:var(--muted);
}
.about__list li{ display:flex; gap:12px; max-width:52ch; }
.about__list li::before{ content:"—"; color:var(--line); flex:none; }

.about__badges{
  display:flex; flex-wrap:wrap; align-items:center;
  gap:clamp(22px,3vw,36px);
  margin-top:clamp(20px,2.6vw,30px);
}
.about__badge{ display:block; width:152px; height:auto; }

/* Columns size to their content rather than splitting the row evenly:
   at four equal columns the cells are ~125px here, and "Odessa, UA" only
   stays on one line up to 24px — barely above where this started. Letting
   the numbers keep just the width they need frees enough for the location
   to sit on one line at the full size. */
.facts{
  display:grid;
  grid-template-columns:repeat(4,auto);
  justify-content:space-between;
  gap:28px;
  margin:clamp(52px,7vw,84px) 0 0;
  padding-top:36px;
  border-top:1px solid var(--line);
}
.facts dt{
  font-family:var(--mono); font-size:11px;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--faint); margin-bottom:14px;
}
/* The values carry the block, so they scale hardest; the labels move a
   single step so they stay the quiet half of the pair. The vw term is
   what does the work between the two ends — at the top of the range
   "Odessa, UA" is the widest value and still clears its column. */
.facts dd{
  margin:0;
  font-size:clamp(26px,2.5vw,38px);
  line-height:1.05; letter-spacing:-.03em;
  font-variant-numeric:tabular-nums;
}

.about__media{ margin:0; overflow:hidden; aspect-ratio:3/4; background:var(--bg-2); }
/* the copy now runs about twice the photo's height, which left the right
   column empty for most of the section — pin it so it travels along */
@media (min-width:901px){
  .about__media{ position:sticky; top:calc(var(--nav-h) + 32px); }
}
.about__media img{
  width:100%; height:100%; object-fit:cover;
  /* the frame is portrait and the photo landscape, so cover shows only
     half the width — biased left, otherwise the crop cuts through his
     face (centre would start the window ~320px into a 1280px photo) */
  object-position:10% center;
  filter:grayscale(1) contrast(1.08) brightness(.92);
  transition:transform 1.2s var(--ease), filter .8s ease;
}
.about__media:hover img{ transform:scale(1.04); filter:grayscale(.55) contrast(1.08) brightness(.95); }

/* ── featured ──────────────────────────────────────────── */
.featured{ border-top:1px solid var(--line-soft); }
.feature-list{ display:flex; flex-direction:column; gap:clamp(72px,11vw,160px); }

.feature{
  display:grid;
  grid-template-columns:.92fr 1.08fr;
  gap:clamp(28px,5vw,72px);
  align-items:center;
  cursor:pointer;
}
.feature__out,.feature .player__wave{ cursor:default; }
.feature--flip .feature__media{ order:2; }

.feature__media{
  position:relative; margin:0; overflow:hidden;
  aspect-ratio:1/1; background:var(--bg-2);
}
.feature__media img{
  width:100%; height:100%; object-fit:cover;
  filter:grayscale(1) contrast(1.1) brightness(.86);
  transform:scale(1.02);
  transition:transform 1.3s var(--ease), filter 1s ease;
}
.feature:hover .feature__media img{ transform:scale(1.06); filter:grayscale(.35) contrast(1.1) brightness(.95); }
.feature__num{
  position:absolute; top:16px; left:18px; z-index:2;
  font-family:var(--mono); font-size:11px;
  letter-spacing:.16em; color:rgba(242,240,236,.8);
}
.feature.is-playing .feature__media img{ filter:grayscale(0) contrast(1.08) brightness(.98); }

.feature__meta{
  display:flex; flex-wrap:wrap; gap:18px;
  margin:0 0 clamp(14px,2vw,22px);
  font-family:var(--mono); font-size:11px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--muted);
}
.feature__meta span:first-child{ color:var(--fg); }

/* Meta-line badges — one icon per fact, each opening a tooltip. Built
   from data-chart / data-plays (js/main.js), so a track with neither
   carries no badges.

   Buttons, not decorated spans: that makes the tooltips reachable by
   keyboard and openable by tap, since a touch device has no hover to
   give. They sit first in the meta line and each tooltip is anchored to
   its own left edge, so it always opens into the card's own width — body
   has overflow-x:hidden, and a centred tooltip on a badge near the end
   of the line would be clipped at the viewport edge on a phone. */
.feature__badge{
  position:relative;
  display:inline-flex; align-items:center;
  padding:0; border:0; background:none;
  cursor:help; line-height:0;
  transition:transform .3s var(--ease), color .3s;
}
.feature__badge svg{ width:14px; height:14px; }
.feature__badge:hover{ transform:scale(1.12); }
.feature__badge:focus-visible{
  outline:2px solid var(--accent); outline-offset:4px; border-radius:50%;
}
/* the seal marks an achievement, so it carries the accent outright; the
   play count is just a figure and only warms up on hover */
.feature__badge--chart{ color:var(--accent); }
.feature__badge--plays{ color:var(--muted); }
.feature__badge--plays:hover,
.feature__badge--plays:focus-visible{ color:var(--accent); }

.feature__tip{
  position:absolute; bottom:calc(100% + 12px); left:0;
  padding:9px 13px;
  border-radius:9px;
  border:1px solid var(--line);
  background:var(--bg-2);
  color:var(--fg);
  font-family:var(--mono); font-size:11px;
  letter-spacing:.1em; text-transform:uppercase;
  white-space:nowrap;
  opacity:0; transform:translateY(5px);
  pointer-events:none;
  transition:opacity .3s, transform .3s var(--ease);
  z-index:5;
}
.feature__badge:hover .feature__tip,
.feature__badge:focus-visible .feature__tip{
  opacity:1; transform:translateY(0);
}
.feature__title{
  margin:0;
  font-size:clamp(30px,4.2vw,60px);
  line-height:1.02; letter-spacing:-.045em; font-weight:500;
}
.feature__desc{
  margin:clamp(16px,2vw,24px) 0 clamp(28px,4vw,44px);
  max-width:44ch; color:var(--muted);
}

/* ── waveform player ───────────────────────────────────── */
.player{
  display:flex; align-items:center; gap:clamp(14px,2vw,24px);
  padding-top:22px;
  border-top:1px solid var(--line);
}
.player__btn{
  flex:none;
  width:52px; height:52px; border-radius:50%;
  border:1px solid var(--line);
  display:grid; place-items:center;
  position:relative; overflow:hidden;
  transition:border-color .4s, color .4s;
}
.player__btn::before{
  content:""; position:absolute; inset:0;
  background:var(--fg); border-radius:50%;
  transform:scale(0); transition:transform .45s var(--ease);
}
.player__btn:hover{ border-color:var(--fg); color:var(--bg); }
.player__btn:hover::before{ transform:scale(1); }
.player__btn svg{ position:relative; z-index:1; width:11px; height:13px; fill:currentColor; }
.player__btn .ico-play{ margin-left:2px; }
.player__btn .ico-pause{ display:none; }
.is-playing .player__btn{ border-color:var(--accent); color:var(--accent); }
.is-playing .player__btn::before{ background:var(--accent); }
.is-playing .player__btn:hover{ color:var(--bg); }
.is-playing .player__btn .ico-play{ display:none; }
.is-playing .player__btn .ico-pause{ display:block; }

.player__wave{
  flex:1; min-width:0;
  height:56px; display:block; cursor:pointer;
}
.player__time{
  flex:none;
  font-family:var(--mono); font-size:11px;
  letter-spacing:.1em; color:var(--muted);
  font-variant-numeric:tabular-nums;
  min-width:4ch; text-align:right;
}

/* ── work rows ─────────────────────────────────────────── */
.work{ border-top:1px solid var(--line-soft); }
.rows{ border-top:1px solid var(--line); }

.row{
  position:relative;
  display:grid;
  grid-template-columns:44px 52px minmax(0,1.1fr) minmax(0,1.3fr) minmax(0,1fr) 60px 22px;
  align-items:center;
  gap:clamp(12px,2vw,28px);
  padding:clamp(20px,2.4vw,30px) 0;
  border-bottom:1px solid var(--line);
  transition:padding-inline .5s var(--ease);
}
.row::before{
  content:""; position:absolute; left:0; right:0; top:0; bottom:0; z-index:-1;
  background:var(--bg-2);
  transform:scaleY(0); transform-origin:bottom;
  transition:transform .5s var(--ease);
}
.row:hover{ padding-inline:clamp(10px,1.6vw,22px); }
.row:hover::before{ transform:scaleY(1); transform-origin:top; }

.row__idx{
  font-family:var(--mono); font-size:11px;
  letter-spacing:.1em; color:var(--faint);
  transition:color .4s;
}
.row:hover .row__idx{ color:var(--muted); }

.row__btn{
  width:36px; height:36px; border-radius:50%;
  border:1px solid var(--line);
  display:grid; place-items:center;
  color:var(--muted);
  transition:border-color .4s, color .4s, background .4s, transform .4s var(--ease);
}
.row__btn svg{ width:9px; height:11px; fill:currentColor; }
.row__btn .ico-play{ margin-left:2px; }
.row__btn .ico-pause{ display:none; }
.row:hover .row__btn{ color:var(--fg); border-color:var(--fg); }
.row__btn:hover{ background:var(--fg); color:var(--bg); transform:scale(1.06); }
.row.is-playing .row__btn{ background:var(--accent); border-color:var(--accent); color:#fff; }
.row.is-playing .row__btn .ico-play{ display:none; }
.row.is-playing .row__btn .ico-pause{ display:block; }

.row__artist{
  font-size:clamp(14px,calc(1.8vw - 3px),23px);
  letter-spacing:-.035em;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.row__track{
  font-size:clamp(15px,1.4vw,20px);
  letter-spacing:-.03em; color:var(--muted);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  transition:color .4s, transform .5s var(--ease);
}
.row:hover .row__track{ color:var(--fg); transform:translateX(6px); }
.row__role,.row__year{
  font-family:var(--mono); font-size:11px;
  letter-spacing:.12em; text-transform:uppercase; color:var(--faint);
  transition:color .4s;
}
.row__year{ text-align:right; }
.row:hover .row__role,.row:hover .row__year{ color:var(--muted); }
.row.is-playing .row__artist{ color:var(--accent); }

.row__bar{
  position:absolute; left:0; bottom:-1px; height:1px;
  width:0; background:var(--accent);
  transition:width .12s linear;
}

/* link out to the release */
.row__out{
  font-family:var(--mono); font-size:12px; color:var(--faint);
  text-align:right;
  opacity:0; transform:translate(-4px,4px);
  transition:opacity .4s var(--ease), transform .4s var(--ease), color .3s;
}
.row:hover .row__out{ opacity:1; transform:none; }
.row__out:hover{ color:var(--accent); }

.feature__out{
  display:inline-flex; align-items:center; gap:8px;
  margin-top:clamp(20px,2.4vw,28px);
  font-family:var(--mono); font-size:11px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--muted);
  transition:color .35s;
}
.feature__out:hover{ color:var(--accent); }
.feature__out span{ transition:transform .35s var(--ease); }
.feature__out:hover span{ transform:translate(2px,-2px); }

/* hover thumbnail that follows the cursor */
.row-preview{
  position:fixed; top:0; left:0; z-index:50;
  width:210px; height:264px;
  pointer-events:none;
  opacity:0; transform:translate(-50%,-50%) scale(.92);
  transition:opacity .4s var(--ease), transform .5s var(--ease);
  overflow:hidden;
  will-change:transform;
}
.row-preview img{
  width:100%; height:100%; object-fit:cover;
  filter:grayscale(1) contrast(1.1) brightness(.9);
  transition:filter .6s var(--ease);
}
.row-preview.is-visible{ opacity:1; transform:translate(-50%,-50%) scale(1); }
/* same filter function list as above, so it interpolates instead of snapping */
.row-preview.is-visible img{ filter:grayscale(0) contrast(1) brightness(1); }

/* ── services ──────────────────────────────────────────── */
.services{ border-top:1px solid var(--line-soft); }
/* three standalone package cards */
.svc{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(16px,1.8vw,26px);
  align-items:stretch;
}

.pkg{
  position:relative; isolation:isolate;
  display:flex; flex-direction:column;
  padding:clamp(28px,2.6vw,38px);
  border:1px solid var(--line);
  border-radius:20px;
  background:var(--bg-2);
  transition:transform .5s var(--ease), border-color .45s, box-shadow .5s var(--ease);
}
.pkg:hover{
  transform:translateY(-7px);
  border-color:rgba(242,240,236,.28);
  box-shadow:0 26px 55px rgba(0,0,0,.5);
}

.pkg__num{
  font-family:var(--mono); font-size:11px;
  letter-spacing:.14em; color:var(--faint);
}
.pkg__tag{
  position:absolute; top:clamp(28px,2.6vw,38px); right:clamp(28px,2.6vw,38px);
  padding:5px 11px; border-radius:100px;
  background:var(--accent); color:#fff;
  font-family:var(--mono); font-size:9px;
  letter-spacing:.14em; text-transform:uppercase;
}

/* the main package — permanently emphasised and raised above its siblings,
   which stay plain-bordered so this is the only one that reads as "the one" */
.pkg--hot{
  border-color:rgba(217,88,60,.45);
  background:linear-gradient(180deg,rgba(217,88,60,.15),var(--bg-2) 62%);
  transform:translateY(-16px);
  box-shadow:0 30px 65px rgba(0,0,0,.5);
}
.pkg--hot:hover{ transform:translateY(-22px); border-color:rgba(217,88,60,.6); }
.pkg--hot .pkg__title{ color:var(--accent); }

.pkg__title{
  margin:clamp(20px,2.4vw,30px) 0 0;
  font-size:clamp(23px,1.9vw,29px);
  line-height:1.1; letter-spacing:-.04em; font-weight:500;
  transition:color .4s;
}
.pkg__sub{
  margin:11px 0 0;
  color:var(--muted); font-size:14px; line-height:1.5;
}

.pkg__list{
  margin:clamp(24px,2.6vw,32px) 0 0; padding:clamp(24px,2.6vw,32px) 0 0;
  border-top:1px solid var(--line-soft);
  list-style:none;
  font-family:var(--mono); font-size:11px;
  letter-spacing:.1em; text-transform:uppercase; color:var(--faint);
  display:grid; gap:12px;
}
.pkg__list li{ display:flex; gap:10px; }
.pkg__list li::before{ content:"—"; color:var(--line); }

.pkg__foot{ margin-top:auto; padding-top:clamp(26px,3vw,34px); }
.pkg__price{
  margin:0 0 16px;
  display:flex; align-items:baseline; gap:7px;
}
.pkg__from{
  font-family:var(--mono); font-size:11px;
  letter-spacing:.1em; text-transform:uppercase; color:var(--muted);
}
.pkg__price b{
  font-size:clamp(26px,2.4vw,32px);
  letter-spacing:-.04em; font-weight:500;
}
.pkg__price span{
  font-family:var(--mono); font-size:11px;
  letter-spacing:.12em; text-transform:uppercase; color:var(--muted);
}

/* outline by default; only the featured middle card keeps the solid
   white button, so the emphasis matches the card treatment above it */
.pkg__book{
  position:relative; overflow:hidden; isolation:isolate;
  width:100%; padding:14px 24px;
  border-radius:100px;
  background:transparent; color:var(--fg);
  border:1px solid var(--line);
  font-size:15px; font-weight:500; letter-spacing:-.005em;
  transition:color .4s var(--ease), border-color .4s;
}
.pkg__book::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:var(--accent);
  transform:translateY(101%);
  transition:transform .45s var(--ease);
}
.pkg__book:hover{ color:#fff; border-color:transparent; }
.pkg__book:hover::after{ transform:translateY(0); }
.pkg__book:active{ transform:scale(.97); }

.pkg--hot .pkg__book{ background:var(--fg); color:var(--bg); border-color:transparent; }
.pkg--hot .pkg__book:hover{ color:#fff; }

/* first-time-client offer, sitting under the three cards */
.svc-offer{
  margin:clamp(28px,3.4vw,44px) 0 0;
  padding:clamp(18px,2.2vw,26px) clamp(20px,2.6vw,32px);
  border:1px solid rgba(217,88,60,.55);
  border-radius:16px;
  background:rgba(217,88,60,.06);
  color:var(--fg);
  font-size:15px; line-height:1.6;
}
/* ── distribution panel ────────────────────────────────────
   The section's closing move, so it's built to stop the scroll rather
   than match the offer plaque above it: darker ground, its own heading,
   a turning accent ring and a marquee of where the release ends up. */
.distro-cta{
  position:relative;
  margin-top:clamp(20px,2.6vw,32px);
  border-radius:22px;
  overflow:hidden;                     /* clips both the ring and the marquee */
  background:
    radial-gradient(120% 140% at 8% 0%, rgba(217,88,60,.18), transparent 58%),
    linear-gradient(180deg, #141212, var(--bg-2));
  isolation:isolate;
}

/* The ring. A conic gradient can't be rotated in place, so a square
   pseudo-element carries it and turns instead — square, or the corners
   would lag behind the sides. The mask then keeps only a 1px frame of
   it, which is what reads as a travelling highlight along the border.
   Masking beats animating a border colour: it can light one edge at a
   time, and it needs no @property. */
.distro-cta__ring{
  position:absolute; inset:0; z-index:0;
  border-radius:inherit;
  padding:1px;
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  overflow:hidden;
}
.distro-cta__ring::before{
  content:""; position:absolute;
  top:50%; left:50%;
  width:170%; aspect-ratio:1;
  margin:-85% 0 0 -85%;
  background:conic-gradient(from 0deg,
    rgba(217,88,60,0) 0deg, rgba(217,88,60,.95) 55deg,
    rgba(242,240,236,.55) 100deg, rgba(217,88,60,0) 190deg, rgba(217,88,60,0) 360deg);
  animation:distro-turn 7s linear infinite;
}
@keyframes distro-turn{ to{ transform:rotate(360deg); } }

/* a resting outline, so the panel still reads as bordered between passes */
.distro-cta::after{
  content:""; position:absolute; inset:0; z-index:0;
  border:1px solid rgba(217,88,60,.28);
  border-radius:inherit; pointer-events:none;
}

/* Spotlight that follows the pointer. js/main.js writes --sx/--sy; the
   gradient is painted regardless and only faded in on hover, so there's
   no layout or paint work happening while the cursor is elsewhere. */
.distro-cta__spot{
  position:absolute; inset:0; z-index:0;
  border-radius:inherit; pointer-events:none;
  background:radial-gradient(260px circle at var(--sx,50%) var(--sy,50%),
    rgba(217,88,60,.22), rgba(217,88,60,.06) 45%, transparent 70%);
  opacity:0; transition:opacity .45s var(--ease);
}
@media (hover: hover){
  .distro-cta:hover .distro-cta__spot{ opacity:1; }
}

.distro-cta__body{
  position:relative; z-index:1;
  padding:clamp(26px,3vw,38px) clamp(22px,3vw,44px) clamp(22px,2.4vw,30px);
  display:grid; gap:clamp(20px,2.6vw,34px);
}
@media (min-width:900px){
  /* the aside is content-width, so the copy keeps the room it needs */
  .distro-cta__body{ grid-template-columns:minmax(0,1fr) auto; align-items:center; }
}
.distro-cta__lead{ max-width:52ch; }
.distro-cta__lead .label{ display:block; margin-bottom:14px; }

.distro-cta__title{
  margin:0 0 12px;
  font-size:clamp(24px,2.6vw,36px);
  line-height:1.08; letter-spacing:-.04em; font-weight:500;
}
.distro-cta__text{
  margin:0;
  color:var(--muted); font-size:clamp(15px,1.2vw,17px); line-height:1.55;
}
.distro-cta__text b{ font-weight:500; color:var(--fg); }

.distro-cta__aside{ display:grid; gap:clamp(16px,2vw,22px); justify-items:start; }
@media (min-width:900px){
  .distro-cta__aside{ justify-items:end; }
}

.distro-cta__facts{
  display:flex; flex-wrap:wrap; gap:8px;
  margin:0; padding:0; list-style:none;
}
@media (min-width:900px){
  .distro-cta__facts{ justify-content:flex-end; max-width:26ch; }
}
.distro-cta__facts li{
  padding:7px 13px;
  border:1px solid var(--line); border-radius:100px;
  font-family:var(--mono); font-size:11px;
  letter-spacing:.12em; text-transform:uppercase; color:var(--muted);
}

/* Marquee of platforms. The list is in the markup twice, so shifting by
   half its width lands exactly where it started and the loop has no seam. */
.distro-cta__marquee{
  position:relative; z-index:1;
  border-top:1px solid var(--line-soft);
  padding:13px 0;
  overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask-image:linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.distro-cta__track{
  display:flex; width:max-content; gap:34px;
  animation:distro-marquee 34s linear infinite;
}
.distro-cta__track span{
  font-family:var(--mono); font-size:12px;
  letter-spacing:.16em; text-transform:uppercase; color:var(--faint);
  white-space:nowrap;
}
@keyframes distro-marquee{ to{ transform:translateX(calc(-50% - 17px)); } }

@media (prefers-reduced-motion:reduce){
  .distro-cta__ring::before,
  .distro-cta__track{ animation:none; }
}

/* ── presets ───────────────────────────────────────────── */
.preset-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(16px,1.8vw,26px);
}

.preset{
  display:flex; flex-direction:column;
  border:1px solid var(--line);
  border-radius:20px;
  overflow:hidden;
  background:var(--bg-2);
  transition:transform .5s var(--ease), border-color .45s, box-shadow .5s var(--ease);
}
.preset:hover{
  transform:translateY(-7px);
  border-color:rgba(242,240,236,.28);
  box-shadow:0 26px 55px rgba(0,0,0,.5);
}

/* no cover photography yet — a flat tinted panel with the index number
   reads as a deliberate cover treatment rather than a missing asset */
.preset__cover{
  aspect-ratio:4/3;
  display:flex; align-items:flex-end;
  padding:clamp(20px,2.2vw,28px);
  background:
    radial-gradient(120% 140% at 12% 0%, rgba(217,88,60,.22), transparent 60%),
    var(--bg-2);
  border-bottom:1px solid var(--line-soft);
}
.preset__cover[data-tone="b"]{
  background:
    radial-gradient(120% 140% at 88% 0%, rgba(217,88,60,.16), transparent 60%),
    var(--bg-2);
}
.preset__cover[data-tone="c"]{
  background:
    radial-gradient(140% 160% at 50% 100%, rgba(217,88,60,.18), transparent 65%),
    var(--bg-2);
}
.preset__idx{
  font-family:var(--mono); font-size:13px;
  letter-spacing:.16em; color:var(--faint);
}

.preset__title{
  margin:clamp(22px,2.4vw,28px) clamp(22px,2.4vw,28px) 0;
  font-size:19px; letter-spacing:-.03em; font-weight:500;
}
.preset__desc{
  margin:10px clamp(22px,2.4vw,28px) 0;
  color:var(--muted); font-size:14px; line-height:1.55;
}
.preset__foot{
  margin-top:auto;
  padding:clamp(22px,2.4vw,28px);
}
.preset__soon{
  display:inline-flex; align-items:center;
  padding:9px 16px;
  border-radius:100px;
  border:1px dashed var(--line);
  font-family:var(--mono); font-size:10px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--faint);
}

.preset-note{
  margin:clamp(28px,3.4vw,40px) 0 0;
  color:var(--muted); font-size:14px;
}
.preset-note__link{
  background:none; border:0; padding:0; margin:0;
  font:inherit; cursor:pointer;
  color:var(--fg); text-decoration:underline;
  text-underline-offset:3px; text-decoration-color:var(--line);
  transition:text-decoration-color .3s;
}
.preset-note__link:hover{ text-decoration-color:var(--fg); }

/* ── contact ───────────────────────────────────────────── */
.contact{ border-top:1px solid var(--line-soft); }
.contact__grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(48px,6vw,96px);
  align-items:start;
}
.contact__left{ max-width:640px; }
.contact__right{ padding-top:clamp(8px,1.6vw,20px); }
.contact__formlead{
  margin:0 0 clamp(26px,3.4vw,36px);
  max-width:36ch;
  color:var(--muted); font-size:17px; line-height:1.55;
}
.contact__actions{
  display:flex; flex-wrap:wrap; gap:14px;
  margin-top:clamp(36px,5vw,56px);
}
@media (max-width:480px){
  .contact__actions{ gap:12px; }
  .contact__actions .btn{ flex:1 1 100%; justify-content:center; }
}
.contact__title{
  margin:0 0 clamp(28px,4vw,48px);
  font-size:clamp(38px,6vw,88px);
  line-height:.98; letter-spacing:-.05em; font-weight:500;
}
.contact__mail{
  display:inline-block;
  font-size:clamp(17px,1.9vw,26px);
  letter-spacing:-.03em;
  background-image:linear-gradient(var(--accent),var(--accent));
  background-repeat:no-repeat;
  background-size:0% 1px;
  background-position:0 100%;
  transition:background-size .55s var(--ease), color .4s;
  padding-bottom:3px;
}
.contact__mail:hover{ color:var(--accent); background-size:100% 1px; }

.socials{
  list-style:none; margin:clamp(44px,6vw,72px) 0 0; padding:0;
  display:flex; flex-wrap:wrap; gap:clamp(22px,3.4vw,36px);
}
.social{
  display:flex; flex-direction:column; align-items:center; gap:13px;
  text-align:center;
}

.social__icon{
  position:relative;
  width:60px; height:60px; border-radius:50%;
  display:grid; place-items:center;
  color:var(--muted);
  border:1px solid var(--line);
  transition:background .4s var(--ease), color .35s, border-color .4s,
             transform .45s var(--ease), box-shadow .45s var(--ease);
}
.social__icon svg{
  width:22px; height:22px;
  transition:transform .45s var(--ease);
}

/* little accent badge that pops in on hover, like a notification */
.social__arrow{
  position:absolute; top:-3px; right:-3px;
  width:18px; height:18px; border-radius:50%;
  display:grid; place-items:center;
  background:var(--accent); color:#fff;
  font-size:9px; line-height:1;
  opacity:0; transform:scale(.3) rotate(-45deg);
  transition:opacity .35s var(--ease), transform .45s var(--ease);
}

.social__label{
  font-family:var(--mono); font-size:11px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--faint);
  transition:color .35s;
}

.social:hover .social__icon,
.social:focus-visible .social__icon{
  background:var(--fg); color:var(--bg); border-color:var(--fg);
  transform:translateY(-5px);
  box-shadow:0 16px 30px rgba(0,0,0,.4);
}
.social:hover .social__icon svg{ transform:rotate(-10deg) scale(1.08); }
.social:hover .social__arrow{ opacity:1; transform:scale(1) rotate(0deg); }
.social:hover .social__label{ color:var(--accent); }
.social:active .social__icon{ transform:translateY(-2px) scale(.94); }

/* ── form ──────────────────────────────────────────────── */
.form{ display:grid; gap:clamp(20px,2.6vw,30px); }
.field{ display:grid; gap:10px; }
/* Direct children only, throughout. The pill group nests its own
   <label>s and radios inside .field, and a descendant selector here
   outspecifies their rules — which silently forced the radios to
   width:100% and blew out the panel horizontally. */
.field > label{
  font-family:var(--mono); font-size:13px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--fg);
}
/* the list position, dimmed so it orders without competing with the label */
.field__num{ color:var(--faint); margin-right:10px; }
.field > input,.field > textarea{
  width:100%;
  background:transparent;
  border:0; border-bottom:1px solid var(--line);
  padding:10px 0;
  color:var(--fg);
  font:inherit; font-size:19px; letter-spacing:-.01em;
  border-radius:0;
  transition:border-color .4s;
  resize:vertical;
}
.field > input::placeholder,.field > textarea::placeholder{ color:var(--faint); }
.field > input:focus,.field > textarea:focus{ outline:none; border-bottom-color:var(--fg); }
.field.is-invalid > input,.field.is-invalid > textarea{ border-bottom-color:var(--accent); }

/* file input: the rule above sizes text fields, which leaves the native
   control oversized and misaligned — pull it back and dress the button */
.field > input[type="file"]{
  font-size:14px; color:var(--muted);
  padding:14px 0;
  cursor:pointer;
}
.field > input[type="file"]::file-selector-button{
  margin-right:14px;
  padding:9px 18px;
  border-radius:100px;
  border:1px solid var(--line);
  background:transparent;
  color:var(--fg);
  font-family:var(--mono); font-size:12px;
  letter-spacing:.1em; text-transform:uppercase;
  cursor:pointer;
  transition:color .3s, border-color .3s, background .3s;
}
.field > input[type="file"]::file-selector-button:hover{
  background:var(--fg); color:var(--bg); border-color:var(--fg);
}

.filenote{
  margin:8px 0 0; min-height:1.3em;
  font-family:var(--mono); font-size:12px;
  letter-spacing:.06em; color:var(--faint);
  overflow-wrap:anywhere;
}
.filenote.is-ok{ color:var(--muted); }
.filenote.is-error{ color:var(--accent); }
/* help text under the input's underline */
.field__hint{
  margin:0;
  font-size:13px; line-height:1.5; color:var(--faint);
}
.form__submit{ justify-self:start; margin-top:8px; }

/* A variable number of name rows, each with a remove control — used by
   both Featuring and Producers, hence the neutral name.
   Not `.field > input` — these sit inside .multi, a level deeper, so
   the direct-child rule above doesn't reach them and the sizing/underline
   is repeated by hand instead of leaning on it. */
.multi{ display:grid; gap:8px; }
.multi__row{ display:flex; align-items:center; gap:10px; }
.multi__input{
  flex:1 1 auto; min-width:0;
  background:transparent;
  border:0; border-bottom:1px solid var(--line);
  padding:10px 0;
  color:var(--fg);
  font:inherit; font-size:19px; letter-spacing:-.01em;
  border-radius:0;
  transition:border-color .4s;
}
.multi__input::placeholder{ color:var(--faint); }
.multi__input:focus{ outline:none; border-bottom-color:var(--fg); }

/* hidden on the one row a fresh form starts with — nothing to remove yet */
.multi__remove{
  display:none;
  flex:0 0 auto;
  align-items:center; justify-content:center;
  width:26px; height:26px;
  border-radius:50%;
  border:1px solid var(--line);
  background:transparent;
  color:var(--muted);
  cursor:pointer;
  transition:color .3s, border-color .3s;
}
.multi__row.has-remove .multi__remove{ display:inline-flex; }
.multi__remove svg{ width:9px; height:9px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; }
.multi__remove:hover{ color:var(--accent); border-color:var(--accent); }
.multi__remove:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }

.multi__add{
  justify-self:start;
  display:inline-flex; align-items:center; gap:6px;
  padding:0; margin-top:2px;
  background:none; border:0;
  font-family:var(--mono); font-size:12px;
  letter-spacing:.1em; text-transform:uppercase; color:var(--accent);
  cursor:pointer;
  transition:color .3s, filter .3s;
}
.multi__add span[aria-hidden]{ font-size:15px; line-height:1; }
.multi__add:hover{ filter:brightness(1.15); }
.multi__add:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }

.pill-group{ display:flex; flex-wrap:wrap; gap:10px; }
.pill-group__input{
  position:absolute;
  width:1px; height:1px;
  margin:-1px; padding:0; border:0;
  clip:rect(0,0,0,0); overflow:hidden;
}
.pill-group__btn{
  display:inline-flex; align-items:center;
  padding:10px 19px;
  border-radius:100px;
  border:1px solid var(--line);
  font-family:var(--mono); font-size:13px;
  letter-spacing:.1em; text-transform:uppercase; color:var(--muted);
  cursor:pointer;
  transition:color .3s, border-color .3s, background .3s;
}
.pill-group__btn:hover{ color:var(--fg); border-color:rgba(242,240,236,.35); }
.pill-group__input:checked + .pill-group__btn{
  background:var(--fg); color:var(--bg); border-color:var(--fg);
}
.pill-group__input:focus-visible + .pill-group__btn{
  outline:2px solid var(--accent); outline-offset:2px;
}
.form__note{
  margin:0; min-height:1.4em;
  font-family:var(--mono); font-size:13px;
  letter-spacing:.1em; text-transform:uppercase; color:var(--muted);
  transition:color .3s;
}
.form__note.is-ok{ color:var(--fg); }
.form__note.is-error{ color:var(--accent); }

/* honeypot — visible to bots, not to people. Clipped rather than parked
   at left:-9999px, which pushes the panel's overflow box sideways. */
.hp{
  position:absolute;
  width:1px; height:1px;
  margin:-1px; padding:0; border:0;
  clip:rect(0,0,0,0); clip-path:inset(50%);
  overflow:hidden; white-space:nowrap;
  pointer-events:none;
}

.form.is-sending{ opacity:.75; }
.form__submit:disabled{ cursor:progress; }

/* two-column layout for the longer (distribution) form. Hints sit
   BELOW their input (label → input → hint), so rows align by their
   tops and labels stay glued to their fields — bottom-aligning with
   hints above the input left holes wherever hint lengths differed. */
@media (min-width:700px){
  .form--grid{
    grid-template-columns:1fr 1fr;
    column-gap:clamp(26px,3vw,38px);
    row-gap:clamp(20px,2.4vw,28px);
    align-items:start;
  }
  .form--grid .field--wide,
  .form--grid .form__submit,
  .form--grid .form__note{ grid-column:1 / -1; }
}

/* ── contact modal ─────────────────────────────────────── */
body.modal-open{ overflow:hidden; }

.modal{
  position:fixed; inset:0; z-index:300;
  display:flex; align-items:center; justify-content:center;
  padding:24px;
  visibility:hidden; opacity:0;
  transition:opacity .4s var(--ease), visibility .4s;
}
.modal.is-open{ visibility:visible; opacity:1; }

.modal__backdrop{
  position:absolute; inset:0;
  background:rgba(6,6,7,.72);
  backdrop-filter:blur(6px) saturate(140%);
  -webkit-backdrop-filter:blur(6px) saturate(140%);
}

.modal__panel{
  position:relative; z-index:1;
  width:100%; max-width:460px;
  max-height:calc(100svh - 48px);
  /* a dialog scrolls vertically only — never sideways. Note overflow-y
     alone would compute overflow-x to auto, which is how the sideways
     scroll appeared in the first place. */
  overflow-x:hidden; overflow-y:auto;
  background:var(--bg-2);
  border:1px solid var(--line-soft);
  border-radius:20px;
  padding:clamp(30px,5vw,46px);
  box-shadow:0 30px 80px rgba(0,0,0,.55);
  transform:translateY(18px) scale(.97);
  transition:transform .45s var(--ease);
}
.modal.is-open .modal__panel{ transform:none; }

.modal__close{
  position:absolute; top:16px; right:16px; z-index:2;
  width:38px; height:38px; border-radius:50%;
  display:grid; place-items:center;
  font-size:22px; line-height:1; color:var(--muted);
  background:rgba(242,240,236,.06);
  border:1px solid var(--line-soft);
  transition:color .3s, background .3s, transform .3s var(--ease);
}
.modal__close:hover{ color:var(--fg); background:rgba(242,240,236,.12); }
.modal__close:active{ transform:scale(.92); }
.modal__close svg{
  width:13px; height:13px;
  fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round;
}

.modal__title{
  margin:0 0 10px;
  padding-right:34px;
  font-size:clamp(24px,4.4vw,32px);
  line-height:1.08; letter-spacing:-.04em; font-weight:500;
}
.modal__sub{
  margin:0 0 clamp(26px,3.6vw,34px);
  max-width:38ch;
  color:var(--muted); font-size:17px; line-height:1.55;
}
.modal__sub a{ color:var(--fg); text-decoration:underline; text-underline-offset:3px; }
.modal__sub a:hover{ color:var(--accent); }
/* pulled in when the partner logo follows and the two should read as one */
.modal__sub--tight{ margin-bottom:14px; }

/* Believe's own mark, same file the About badges use. Left at its
   supplied colours — it's someone else's logo, so it gets a hover on
   opacity rather than a recolour. */
.offer__partner{
  display:inline-block;
  margin:0 0 clamp(28px,3.6vw,38px);
  transition:opacity .3s;
}
.offer__partner img{ display:block; width:132px; height:auto; }
.offer__partner:hover{ opacity:.72; }
.offer__partner:focus-visible{ outline:2px solid var(--accent); outline-offset:6px; }

/* ── two-step distribution modal ─────────────────────────
   Steps are toggled with [hidden] rather than a class, so a step that
   isn't showing is out of the tab order and out of the accessibility
   tree for free — no aria-hidden bookkeeping, and the form's fields
   can't be tabbed into from the terms step. */
.wizard__count{
  margin:0 0 22px;
  font-family:var(--mono); font-size:12px;
  letter-spacing:.16em; color:var(--faint);
}
.wizard__step[hidden]{ display:none; }
.wizard__next{ justify-self:start; margin-top:clamp(28px,4vw,40px); }

.wizard__back{
  display:inline-flex; align-items:center; gap:8px;
  margin-top:26px; padding:0;
  background:none; border:0;
  font-family:var(--mono); font-size:12px;
  letter-spacing:.1em; text-transform:uppercase; color:var(--muted);
  cursor:pointer; transition:color .3s;
}
.wizard__back:hover{ color:var(--fg); }
.wizard__back:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }

/* the offer itself: two columns where there's room, since the groups are
   short and a single column would run the panel very long */
.offer{ display:grid; gap:clamp(24px,3vw,32px); }
@media (min-width:760px){
  .offer{ grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:clamp(32px,4vw,56px); }
}
.offer__group .label{ display:block; margin-bottom:12px; color:var(--faint); }
.offer__group ul{ margin:0; padding:0; list-style:none; display:grid; gap:10px; }
.offer__group li{
  position:relative; padding-left:16px;
  color:var(--muted); font-size:15px; line-height:1.55;
}
.offer__group li::before{
  content:""; position:absolute; left:0; top:.65em;
  width:5px; height:1px; background:var(--faint);
}
/* the "worth knowing" asides read as caveats, not features */
.offer__note{ color:var(--faint); font-size:14px; }
.offer__note::before{ background:var(--accent); }

.offer__group--price li{ color:var(--fg); font-size:17px; }
.offer__group--price b{ font-weight:500; font-variant-numeric:tabular-nums; }
.offer__group--price span{ color:var(--muted); font-size:15px; }

/* wider panel for the distribution form — scoped above the mobile
   breakpoint so it can't fight .modal__panel{max-width:none} there */
@media (min-width:641px){
  .modal--wide .modal__panel{ max-width:760px; }
}

/* selected package summary — [hidden] needs the override because the
   grid display below would otherwise beat the UA's [hidden]{display:none} */
.pkg-pick{
  display:grid; gap:6px;
  margin:0 0 clamp(26px,3.6vw,34px);
  padding:16px 20px;
  border:1px solid var(--line);
  border-left:2px solid var(--accent);
  border-radius:12px;
  background:rgba(242,240,236,.04);
}
.pkg-pick[hidden]{ display:none; }
.pkg-pick__label{
  font-family:var(--mono); font-size:10px;
  letter-spacing:.16em; text-transform:uppercase; color:var(--faint);
}
.pkg-pick__name{ font-size:19px; letter-spacing:-.02em; color:var(--fg); }
.pkg-pick__price{
  font-family:var(--mono); font-size:12px;
  letter-spacing:.08em; text-transform:uppercase; color:var(--muted);
}

@media (max-width:640px){
  .modal{ align-items:flex-end; padding:0; }
  .modal__panel{
    max-width:none;
    border-radius:20px 20px 0 0;
    padding:30px 22px calc(26px + env(safe-area-inset-bottom));
    max-height:88svh;
    transform:translateY(100%);
  }
  .modal.is-open .modal__panel{ transform:none; }
}

/* ── footer ────────────────────────────────────────────── */
.footer{ border-top:1px solid var(--line); padding-block:36px; }
/* the badge plate is pure black against a #0A0A0A page — near-invisible
   by design, so the mark reads as white type. Never recoloured. */
.footer__cert{ margin-bottom:30px; }
.footer__cert img{
  display:block;
  width:128px; height:auto;
}
.footer__inner{
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  font-family:var(--mono); font-size:11px;
  letter-spacing:.12em; text-transform:uppercase; color:var(--faint);
}
.footer__top{ transition:color .35s; }
.footer__top:hover{ color:var(--fg); }

.footer__by{ white-space:nowrap; transition:color .35s; }
.footer__by:hover{ color:var(--accent); }
.footer__by span{ display:inline-block; transition:transform .35s var(--ease); }
.footer__by:hover span{ transform:translate(2px,-2px); }

/* ── scroll reveal ─────────────────────────────────────── */
.reveal{
  opacity:0; transform:translateY(26px);
  transition:opacity .9s ease, transform 1s var(--ease);
}
.reveal.is-in{ opacity:1; transform:none; }

/* ═══════════════ mobile player ═══════════════
   Never toggled with [hidden] — visibility+transform keeps the slide
   animation and takes the panels out of hit-testing when closed. */

/* ── mini bar ──────────────────────────────────────────── */
.mini{
  position:fixed; z-index:150;
  left:10px; right:10px; bottom:10px;
  display:flex;
  align-items:center; gap:12px;
  padding:8px 10px;
  border-radius:14px;
  background:rgba(22,22,23,.86);
  backdrop-filter:blur(20px) saturate(160%);
  -webkit-backdrop-filter:blur(20px) saturate(160%);
  border:1px solid rgba(242,240,236,.1);
  box-shadow:0 12px 34px rgba(0,0,0,.55);
  visibility:hidden;
  transform:translateY(calc(100% + 18px));
  transition:transform .55s var(--ease), visibility .55s;
}
.mini.is-on{ visibility:visible; transform:none; }

.mini__open{
  flex:1; min-width:0;
  display:flex; align-items:center; gap:11px;
  text-align:left; padding:0;
}
.mini__art{
  flex:none; width:40px; height:40px;
  border-radius:6px; object-fit:cover;
  background:var(--bg-2);
}
.mini__text{ display:grid; gap:2px; min-width:0; }
.mini__title,.mini__artist{
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  line-height:1.25;
}
.mini__title{ font-size:14px; letter-spacing:-.02em; }
.mini__artist{ font-size:12px; color:var(--muted); }

.mini__toggle{
  flex:none;
  width:40px; height:40px; border-radius:50%;
  display:grid; place-items:center;
  transition:background .3s;
}
.mini__toggle:active{ background:rgba(242,240,236,.1); }
.mini__toggle svg{ width:12px; height:14px; fill:var(--fg); }
.mini__toggle .ico-play{ margin-left:2px; }
.mini__toggle .ico-pause,
.mini.is-playing .mini__toggle .ico-play{ display:none; }
.mini.is-playing .mini__toggle .ico-pause{ display:block; }

.mini__close{
  flex:none;
  width:40px; height:40px; border-radius:50%;
  display:grid; place-items:center;
  color:var(--muted);
  transition:color .3s, background .3s;
}
.mini__close svg{ width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; }
.mini__close:hover{ color:var(--fg); }
.mini__close:active{ background:rgba(242,240,236,.1); color:var(--fg); }

.mini__bar{
  position:absolute; left:12px; right:12px; bottom:4px;
  height:2px; border-radius:2px;
  background:rgba(242,240,236,.14);
  overflow:hidden;
}
.mini__bar i{
  display:block; height:100%; width:0;
  background:var(--accent);
  transition:width .15s linear;
}

/* ── full-screen sheet ─────────────────────────────────── */
.np{
  position:fixed; inset:0; z-index:200;
  display:flex;
  flex-direction:column; align-items:stretch;
  padding:10px clamp(22px,7vw,40px) calc(26px + env(safe-area-inset-bottom));
  background:#0B0B0C;
  visibility:hidden;
  transform:translateY(100%);
  transition:transform .55s var(--ease), visibility .55s;
  overflow:hidden;
}
.np.is-open{ visibility:visible; transform:none; }
.np.is-dragging{ transition:none; }

/* blurred artwork wash behind everything */
.np__bg{
  position:absolute; inset:-25%;
  background-size:cover; background-position:center;
  filter:blur(70px) saturate(180%) brightness(.5);
  opacity:.55;
  transition:opacity .6s ease;
  pointer-events:none;
}
.np > *:not(.np__bg){ position:relative; z-index:1; }

.np__grab{
  flex:none;
  display:grid; place-items:center;
  height:30px; margin-bottom:2vh;
}
.np__grab span{
  display:block; width:38px; height:5px; border-radius:3px;
  background:rgba(242,240,236,.3);
}

/* corner close — desktop only (the grab handle is the mobile idiom) */
.np__x{
  display:none; place-items:center;
  width:44px; height:44px; border-radius:50%;
  color:var(--fg);
  background:rgba(11,11,12,.4);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  border:1px solid rgba(242,240,236,.16);
  transition:color .3s, background .3s, transform .3s var(--ease);
}
.np__x svg{ width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; }
/* higher specificity than ".np > *:not(.np__bg)" above, which would
   otherwise win the position property and drop this into flex flow */
.np > .np__x{ position:absolute; top:20px; right:24px; z-index:3; }
.np__x:hover{ color:var(--fg); background:rgba(11,11,12,.6); }
.np__x:active{ transform:scale(.92); }

/* share — mirrors .np__x but on the left, and visible on every screen
   (there's no mobile-only affordance standing in for it like the grab
   handle does for close) */
.np__share{
  display:grid; place-items:center;
  width:44px; height:44px; border-radius:50%;
  color:var(--fg);
  background:rgba(11,11,12,.4);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  border:1px solid rgba(242,240,236,.16);
  transition:color .3s, background .3s, border-color .3s, transform .3s var(--ease);
}
.np__share svg{ width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.np > .np__share{ position:absolute; top:20px; left:24px; z-index:3; }
.np__share:hover{ background:rgba(11,11,12,.6); }
.np__share:active{ transform:scale(.92); }
.np__share.is-copied{ color:var(--accent); border-color:rgba(217,88,60,.45); }

.np__share-note{
  position:absolute; top:calc(100% + 10px); left:50%;
  transform:translateX(-50%) translateY(-4px);
  padding:6px 13px; border-radius:100px;
  background:var(--fg); color:var(--bg);
  font-family:var(--mono); font-size:10px;
  letter-spacing:.1em; text-transform:uppercase; white-space:nowrap;
  opacity:0; pointer-events:none;
  transition:opacity .3s var(--ease), transform .3s var(--ease);
}
.np__share.is-copied .np__share-note{ opacity:1; transform:translateX(-50%) translateY(0); }

.np__art{
  flex:none;                          /* keep it a perfect square in the flex column */
  margin:0 auto;
  width:min(78vw,340px); aspect-ratio:1/1;
  border-radius:12px; overflow:hidden;
  box-shadow:0 26px 60px rgba(0,0,0,.62);
  transform:scale(.84);
  transition:transform .55s var(--ease);
}
.np.is-playing .np__art{ transform:scale(1); }
.np__art img{ width:100%; height:100%; object-fit:cover; display:block; }

.np__meta{ margin-top:5vh; }
.np__title{
  margin:0;
  font-size:clamp(21px,5.6vw,27px);
  letter-spacing:-.035em; font-weight:600; line-height:1.2;
}
.np__artist{
  margin:5px 0 0;
  font-size:clamp(16px,4.4vw,20px);
  letter-spacing:-.02em; color:var(--accent);
}

/* scrubber */
.np__scrub{ margin-top:4vh; }
.np__track{
  position:relative; display:block;
  height:6px; border-radius:4px;
  background:rgba(242,240,236,.18);
  cursor:pointer; touch-action:none;
}
/* the bar stays 6px tall but grabbing it is a finger-sized target */
.np__track::before{ content:""; position:absolute; inset:-15px 0; }
.np__fill{
  position:absolute; left:0; top:0; bottom:0; width:0;
  border-radius:4px; background:rgba(242,240,236,.85);
  transition:width .15s linear;
}
.np__knob{
  position:absolute; top:50%; left:0;
  width:13px; height:13px; border-radius:50%;
  background:var(--fg);
  transform:translate(-50%,-50%) scale(0);
  transition:transform .3s var(--ease), left .15s linear;
  box-shadow:0 2px 8px rgba(0,0,0,.5);
}
.np__track:active .np__knob,.np__track.is-scrubbing .np__knob{ transform:translate(-50%,-50%) scale(1); }
.np__track.is-scrubbing .np__fill,.np__track.is-scrubbing .np__knob{ transition:none; }

.np__times{
  display:flex; justify-content:space-between;
  margin-top:9px;
  font-family:var(--mono); font-size:11px;
  letter-spacing:.06em; color:var(--muted);
  font-variant-numeric:tabular-nums;
}

/* transport */
.np__ctrl{
  margin-top:auto; padding-top:4vh;
  display:flex; align-items:center; justify-content:center;
  gap:clamp(30px,10vw,54px);
}
.np__btn{ display:grid; place-items:center; padding:10px; }
.np__btn svg{ width:26px; height:21px; fill:var(--fg); transition:opacity .3s, transform .3s var(--ease); }
.np__btn:active svg{ transform:scale(.88); }
.np__btn:disabled svg{ opacity:.28; }

.np__play{
  width:74px; height:74px; border-radius:50%;
  display:grid; place-items:center;
  background:var(--fg);
  transition:transform .3s var(--ease);
}
.np__play:active{ transform:scale(.93); }
.np__play svg{ width:22px; height:26px; fill:var(--bg); }
.np__play .ico-play{ margin-left:3px; }
.np__play .ico-pause,
.np.is-playing .np__play .ico-play{ display:none; }
.np.is-playing .np__play .ico-pause{ display:block; }

.np__out{
  margin-top:3.2vh; text-align:center;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:var(--mono); font-size:11px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--muted);
}
.np__out:active{ color:var(--fg); }

/* the player exists on every screen now */
body.np-open{ overflow:hidden; }

/* phones: full-width pill + edge-to-edge sheet */
@media (max-width:900px){
  body.has-mini{ padding-bottom:74px; }
}

/* desktop: centered floating pill + centered now-playing panel */
@media (min-width:901px){
  .mini{
    left:50%; right:auto; bottom:20px;
    width:min(460px,calc(100vw - 48px));
    transform:translateX(-50%) translateY(calc(100% + 32px));
  }
  .mini.is-on{ transform:translateX(-50%); }
  body.has-mini{ padding-bottom:104px; }

  .np{ justify-content:center; align-items:center; padding:6vh 24px; }
  .np__grab{ display:none; }
  .np__x{ display:grid; }
  .np__art{ width:min(46vh,340px); }
  .np__meta{ margin-top:4vh; text-align:center; }
  .np__meta,.np__scrub,.np__ctrl,.np__out{ width:100%; max-width:440px; margin-inline:auto; }
  .np__ctrl{ margin-top:4vh; }        /* override the mobile margin-top:auto */
}

/* ── responsive ────────────────────────────────────────── */
@media (max-width:1080px){
  .row{ grid-template-columns:36px 44px minmax(0,1fr) minmax(0,1fr) 74px 22px; }
  .row__role{ display:none; }
  /* The About copy column is down to ~420px here while the photo still
     holds its half, which isn't enough for four columns at this size —
     "Odessa, UA" wrapped and left the row ragged. Two columns from here
     rather than only below 900px. */
  .facts{ grid-template-columns:repeat(2,auto); gap:32px 40px; }
}

@media (max-width:900px){
  :root{ --nav-h:64px; }
  .nav__links,.nav__actions{ display:none; }
  .nav__burger{ display:block; }

  .hero{ min-height:100svh; padding-bottom:56px; }
  .hero__grid{ grid-template-columns:1fr; gap:32px; align-content:center; }
  .hero__media{ order:-1; aspect-ratio:4/3; max-height:36svh; }
  .hero__title{ font-size:clamp(48px,15vw,90px); }
  .hero__intro{ max-width:32ch; }
  .hero__foot-mid{ display:none; }

  .about__grid{ grid-template-columns:1fr; gap:40px; }
  .about__media{ aspect-ratio:16/10; }
  .facts{ grid-template-columns:repeat(2,1fr); gap:28px 20px; }

  .feature{ grid-template-columns:1fr; gap:26px; }
  .feature--flip .feature__media{ order:0; }
  .feature__media{ aspect-ratio:16/10; }

  .svc{ grid-template-columns:1fr; }
  .pkg:hover{ transform:none; }        /* no lift on touch */
  .pkg--hot{ transform:none; }         /* stacked cards: no raised offset */
  .pkg--hot:hover{ transform:none; }

  .preset-grid{ grid-template-columns:1fr; }
  .preset:hover{ transform:none; }

  .socials{ justify-content:center; }
  .row-preview{ display:none; }

  .contact__grid{ grid-template-columns:1fr; gap:clamp(40px,7vw,60px); }
  .contact__right{ padding-top:0; }
}

@media (max-width:640px){
  .row{
    grid-template-columns:40px minmax(0,1fr) 62px;
    gap:14px;
    padding:18px 0;
  }
  .row__idx,.row__out{ display:none; }
  .row__track{ grid-column:2; font-size:14px; }
  .row__artist{ grid-column:2; grid-row:1; }
  .row__btn{ grid-row:span 2; }
  .row__year{ grid-row:span 2; }
  .row:hover .row__track{ transform:none; }

  .player{ gap:14px; }
  .player__btn{ width:46px; height:46px; }
  .player__wave{ height:46px; }

  .footer__inner{ flex-direction:column; align-items:flex-start; gap:14px; }
  .footer__mid{ display:none; }
}

/* ── motion preferences ────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .reveal{ opacity:1; transform:none; }
  .hero__title .reveal-line{ transform:none; }
  .hero__media img{ opacity:1; transform:none; }
  .hero__foot{ opacity:1; transform:none; }
}