/* ===========================================================
   WorldSong — global styles (rebuild)
   =========================================================== */

:root {
  /* palette — canonical, from COLOR_REFERENCE.html */
  --bg-deepest: #061616;
  --bg-base: #0A1E1E;
  --bg-card: #0C2424;
  --bg-card-elevated: #112C2C;

  --teal-primary: #2DD4BF;
  --teal-bright: #5EEAD4;
  --teal-soft: #99F6E4;
  --teal-deep: #14B8A6;

  --border-subtle: rgba(45, 212, 191, 0.12);
  --border-default: rgba(45, 212, 191, 0.22);
  --border-strong: rgba(45, 212, 191, 0.4);

  --text-primary: #FFFFFF;
  --text-secondary: #A0B5B5;
  --text-muted: #6B8080;
  --text-on-teal: #061616;

  --bg-page-gradient: linear-gradient(180deg, #061616 0%, #0A1E1E 100%);

  /* alpha helper for box-shadow / drop-shadow glows
     (translucent rendering of --teal-primary, not a new hue) */
  --teal-glow: rgba(45, 212, 191, 0.32);

  /* type */
  --f-display: 'Syne', system-ui, sans-serif;
  --f-body: 'DM Sans', system-ui, sans-serif;

  /* layout */
  --container: 1320px;
  --pad-x: clamp(16px, 4vw, 56px);
  --section-gap: clamp(40px, 6vw, 88px);
  --radius: 14px;
  --radius-sm: 10px;
  --radius-lg: 18px;
  --header-h: 78px;
}

/* reset */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-h);
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--f-body);
  background:
    radial-gradient(1200px 600px at 80% -10%, rgba(94, 234, 212, 0.06), transparent 60%),
    radial-gradient(900px 500px at 0% 110%, rgba(45, 212, 191, 0.05), transparent 60%),
    linear-gradient(180deg, var(--bg-deepest), var(--bg-base));
  color: var(--text-primary);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  line-height: 1.5;
}

[hidden] { display: none !important; }
img, svg, video { display: block; max-width: 100%; }

a { color: inherit; text-decoration: none; transition: color 0.18s ease; }
a:hover { color: var(--teal-primary); }

button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul, ol { list-style: none; padding: 0; margin: 0; }
h1, h2, h3, h4, h5 {
  font-family: var(--f-display); font-weight: 500; margin: 0; line-height: 1.1;
  letter-spacing: -0.01em;
}
p { margin: 0; }

/* anchor scroll offset for each section */
#hero, #browse, #library, #artists, #composers, #studios, #placements, #about, #contact {
  scroll-margin-top: var(--header-h);
}

/* container & section spacing */
.nav-container,
.hero-content,
.browse-section,
.prod-library,
.artists-section,
.three-col,
.studios-section,
.features-strip,
.footer-top,
.footer-bottom { max-width: var(--container); margin-left: auto; margin-right: auto; padding-left: var(--pad-x); padding-right: var(--pad-x); }

/* section heading row */
.section-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.section-title {
  font-family: var(--f-display); font-weight: 500;
  font-size: clamp(15px, 1.15vw, 19px);
  letter-spacing: 0.18em;
  color: var(--text-primary);
  text-transform: uppercase;
}
.view-all {
  color: var(--teal-primary); font-size: 13px; font-weight: 500; letter-spacing: 0.04em;
  border-bottom: 1px solid transparent;
}
.view-all:hover { border-color: var(--teal-primary); }

/* generic buttons */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 9px 18px;
  border-radius: 999px;
  font-family: var(--f-body); font-weight: 500; font-size: 12.5px;
  letter-spacing: 0.12em; text-transform: uppercase;
  border: 1px solid transparent;
  transition: transform 0.15s ease, background 0.18s ease, box-shadow 0.18s ease, color 0.18s ease;
  white-space: nowrap;
}
.btn-ghost { color: var(--text-primary); border-color: rgba(255,255,255,0.5); background: transparent; }
.btn-ghost:hover { color: var(--text-primary); border-color: var(--text-primary); background: rgba(255,255,255,0.06); }
.btn-teal { background: linear-gradient(180deg, var(--teal-bright), var(--teal-primary)); color: var(--text-on-teal); box-shadow: 0 6px 24px -8px var(--teal-glow); }
.btn-teal:hover { color: var(--text-on-teal); transform: translateY(-1px); box-shadow: 0 10px 32px -8px var(--teal-glow); }
.btn-lg { padding: 14px 24px; font-size: 13px; border-radius: 12px; }

/* ========================= HEADER ========================= */
.site-header {
  position: sticky; top: 0; z-index: 60;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background 0.2s ease, border-color 0.2s ease, backdrop-filter 0.2s ease;
}
.site-header::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(6,22,22,0.55) 0%, rgba(6,22,22,0.15) 70%, transparent 100%);
  pointer-events: none;
  transition: opacity 0.2s ease;
}
.site-header.scrolled {
  background: rgba(6, 22, 22, 0.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom-color: var(--border-subtle);
  box-shadow: 0 8px 32px -16px rgba(0,0,0,0.6);
}
.site-header.scrolled::before { opacity: 0; }
.nav-container { display: flex; align-items: center; gap: 28px; height: var(--header-h); }
.logo { display: inline-flex; align-items: center; flex-shrink: 0; }
.logo-img {
  display: block;
  height: 64px; width: auto;
  filter: drop-shadow(0 2px 10px rgba(45, 212, 191, 0.18));
}
.footer-brand .logo-img { height: 56px; }

.nav-main { flex: 1; min-width: 0; }
.nav-main ul { display: flex; align-items: center; justify-content: center; gap: clamp(10px, 1.4vw, 22px); flex-wrap: nowrap; }
.nav-link {
  position: relative;
  font-family: var(--f-body); font-weight: 500;
  font-size: clamp(11px, 0.85vw, 12.5px);
  letter-spacing: 0.14em;
  color: var(--text-secondary); text-transform: uppercase;
  padding: 8px 2px; white-space: nowrap;
}
.nav-link:hover { color: var(--text-primary); }
.nav-link.active { color: var(--text-primary); }
.nav-link.active::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px;
  height: 2px; background: var(--teal-primary); border-radius: 2px;
}
.has-caret .caret { font-size: 10px; color: var(--teal-primary); margin-left: 2px; }

.nav-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }

.hamburger {
  display: none; flex-direction: column; gap: 5px;
  width: 36px; height: 36px; align-items: center; justify-content: center;
  border: 1px solid var(--border-subtle); border-radius: 8px;
}
.hamburger span { display: block; width: 18px; height: 2px; background: var(--text-primary); border-radius: 2px; }

.mobile-menu {
  display: flex; flex-direction: column; gap: 6px;
  padding: 16px var(--pad-x) 22px;
  background: rgba(6, 22, 22, 0.98);
  border-top: 1px solid var(--border-subtle);
}
.mobile-menu a {
  font-family: var(--f-body); font-size: 14px; font-weight: 500; letter-spacing: 0.14em;
  color: var(--text-secondary); text-transform: uppercase;
  padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,0.04);
}
.mobile-menu a.active { color: var(--teal-primary); }
.mobile-menu-actions { display: flex; gap: 10px; padding-top: 14px; }
.mobile-menu-actions .btn { flex: 1; justify-content: center; }

@media (max-width: 1100px) {
  .nav-main { display: none; }
  .nav-actions { display: none; }
  .hamburger { display: inline-flex; }
}

/* ========================= HERO ========================= */
.hero {
  position: relative; isolation: isolate;
  min-height: 460px;
  max-height: 460px;
  margin-top: calc(-1 * var(--header-h));
  padding-top: calc(var(--header-h) + clamp(16px, 2vw, 36px));
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  padding-left: var(--pad-x); padding-right: var(--pad-x);
  padding-bottom: clamp(28px, 4vw, 56px);
}
.hero-photo {
  position: absolute; inset: 0; z-index: -2;
  background: url('images/hero-bg.jpg?v=3') center / cover no-repeat;
  filter: saturate(1.05) brightness(0.85);
}
.hero-overlay {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg, rgba(6,22,22,0.15) 0%, rgba(6,22,22,0.35) 60%, rgba(6,22,22,0.7) 100%),
    radial-gradient(60% 60% at 50% 45%, rgba(6,22,22,0.4), transparent 70%);
}

.hero-content { position: relative; text-align: center; max-width: 1100px; }
.hero-title {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: clamp(40px, 5.4vw, 72px);
  letter-spacing: -0.01em;
  line-height: 1.05;
  margin-bottom: 18px;
  color: var(--text-primary);
  text-shadow: 0 6px 40px rgba(0,0,0,0.6);
}
.hero-br { display: none; }
.hero-sub {
  font-family: var(--f-body); font-weight: 400;
  font-size: clamp(15px, 1.2vw, 19px);
  color: rgba(255,255,255,0.82);
  margin-bottom: 36px;
}
.hero-ctas { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.hero-cta {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 12px 22px;
  border-radius: 12px;
  background: rgba(12, 36, 36, 0.55);
  border: 1px solid rgba(45, 212, 191, 0.45);
  color: var(--text-primary);
  font-weight: 500; font-size: 12.5px; letter-spacing: 0.1em; text-transform: uppercase;
  white-space: nowrap;
  transition: transform 0.15s ease, background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.hero-cta:hover { color: var(--text-primary); background: rgba(45, 212, 191, 0.12); border-color: var(--teal-primary); transform: translateY(-1px); }
.hero-cta svg { color: var(--teal-primary); }

.hero-cta--filled {
  background: linear-gradient(180deg, var(--teal-bright), var(--teal-primary));
  border-color: var(--teal-primary);
  color: var(--text-on-teal);
  box-shadow: 0 6px 24px -8px var(--teal-glow);
}
.hero-cta--filled:hover {
  background: linear-gradient(180deg, var(--teal-bright), var(--teal-primary));
  color: var(--text-on-teal);
  border-color: var(--teal-bright);
  box-shadow: 0 10px 32px -8px var(--teal-glow);
}
.hero-cta--filled svg { color: var(--text-on-teal); }

.hero-divider {
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    var(--teal-primary) 18%,
    var(--teal-primary) 82%,
    transparent 100%);
  opacity: 0.6;
  filter: drop-shadow(0 0 8px var(--teal-glow));
  pointer-events: none;
}

@media (max-width: 1024px) {
  .hero { min-height: 380px; max-height: 380px; }
}
@media (max-width: 900px) {
  .hero-br { display: inline; }
  .hero-ctas .hero-cta { flex: 1 1 auto; justify-content: center; }
}
@media (max-width: 768px) {
  .hero { min-height: auto; max-height: none; padding: 60px var(--pad-x); }
}

/* ========================= BROWSE GENRE/MOOD ========================= */
.browse-section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  padding-top: 64px; padding-bottom: 0;
}
.browse-col {
  background: rgba(12, 36, 36, 0.5);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 18px 14px;
}
.tile-grid { display: grid; grid-template-columns: repeat(8, minmax(0,1fr)); gap: 8px; }
.tile-cell {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  color: var(--text-secondary);
  cursor: pointer;
  text-align: center;
  transition: color 0.18s ease, transform 0.15s ease;
}
.tile-cell:hover { color: var(--text-primary); transform: translateY(-2px); }
.tile-cell:hover .tile-box { border-color: var(--border-strong); background: linear-gradient(180deg, rgba(17,44,44,0.9), rgba(6,22,22,0.95)); box-shadow: 0 0 16px -4px var(--teal-glow); }
.tile-box {
  width: 100%; aspect-ratio: 1; max-width: 56px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(180deg, rgba(12,36,36,0.9), rgba(6,22,22,0.95));
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  transition: border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}
.tile-box svg { color: var(--teal-primary); width: 22px; height: 22px; }
.tile-label {
  font-family: var(--f-body); font-weight: 600;
  font-size: 9.5px;
  letter-spacing: 0.04em;
  line-height: 1.2; text-transform: uppercase;
}

@media (max-width: 1100px) {
  .browse-section { grid-template-columns: 1fr; }
  .tile-grid { grid-template-columns: repeat(8, 1fr); }
}
@media (max-width: 600px) {
  .tile-grid { grid-template-columns: repeat(4, 1fr); }
}

/* ========================= PRODUCTION LIBRARY ========================= */
.prod-library {
  display: grid;
  grid-template-columns: 320px 1fr auto;
  gap: 36px;
  margin-top: 64px;
  align-items: center;
  background: rgba(12, 36, 36, 0.5);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 22px;
  overflow: hidden;
}
.prod-image {
  position: relative; min-height: 220px; aspect-ratio: 16/10; border-radius: var(--radius);
  overflow: hidden;
  background: linear-gradient(135deg, var(--bg-deepest) 0%, var(--bg-card) 50%, var(--bg-deepest) 100%);
}
.prod-image .slide {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.9s ease;
}
.prod-image .slide.is-active { opacity: 1; }
/* Dark gradient overlay removed per design. */
.prod-content { display: flex; flex-direction: column; gap: 14px; padding: 0; align-self: center; min-width: 0; }
.prod-title {
  font-family: var(--f-display); font-weight: 600;
  font-size: clamp(22px, 2vw, 30px);
  letter-spacing: 0.06em;
  white-space: nowrap;
}
.prod-stats { font-size: 13px; letter-spacing: 0.12em; color: var(--text-primary); font-weight: 500; }
.prod-pills { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 28px; max-width: 460px; }
.pill { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; letter-spacing: 0.06em; color: var(--text-primary); }
.pill svg { color: var(--teal-primary); flex-shrink: 0; }

.prod-side { display: flex; flex-direction: column; gap: 16px; align-items: flex-end; align-self: center; min-width: 220px; }
.prod-tagline { font-size: 13px; color: var(--text-secondary); line-height: 1.55; text-align: right; }

@media (max-width: 1100px) {
  .prod-library { grid-template-columns: 1fr; }
  .prod-pills { grid-template-columns: 1fr 1fr; }
  .prod-side { align-items: flex-start; }
  .prod-tagline { text-align: left; }
  .prod-title { white-space: normal; }
}
@media (max-width: 600px) {
  .prod-pills { grid-template-columns: 1fr; }
}

/* ========================= ARTISTS ========================= */
.artists-section { padding-top: 64px; }
.artist-row {
  display: grid; grid-template-columns: repeat(8, minmax(0,1fr));
  gap: 14px;
}
.artist-card {
  display: flex; flex-direction: column; gap: 10px;
  cursor: pointer;
  transition: transform 0.2s ease;
}
.artist-card:hover { transform: translateY(-3px); }
.artist-thumb {
  position: relative; aspect-ratio: 3/4;
  border-radius: var(--radius); overflow: hidden;
  isolation: isolate;
  border: 1px solid var(--border-subtle);
  background-color: var(--bg-card);
  background-size: cover; background-position: center top;
  background-repeat: no-repeat;
  box-shadow: 0 4px 20px -8px rgba(0,0,0,0.5);
}
/* Dark gradient overlay removed per design — let the photo speak. */
.artist-card:hover .artist-thumb { box-shadow: 0 12px 40px -10px rgba(0,0,0,0.7); }

/* .artist-play: visuals defined in UNIFIED PLAY BUTTONS section below */
.artist-play {
  position: absolute; left: 10px; bottom: 10px;
  z-index: 1;
}

.artist-meta { padding: 0 2px; }
.artist-name {
  font-family: var(--f-body); font-weight: 600; font-size: 13.5px;
  color: var(--text-primary);
}
.artist-country { font-size: 11.5px; color: var(--text-secondary); margin-top: 2px; }

@media (max-width: 1200px) {
  .artist-row {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 150px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 8px;
    scrollbar-width: thin;
  }
  .artist-card { scroll-snap-align: start; }
}
/* On touch / narrow viewports the play button overlaps the artist's face on cards
   and the card isn't clickable anyway — hide the overlay there. */
@media (max-width: 768px) {
  .artist-play { display: none; }
}
@media (hover: none) and (pointer: coarse) {
  .artist-play { display: none; }
}

/* ========================= 3-COLUMN ROW ========================= */
.three-col {
  display: grid;
  grid-template-columns: 1.05fr 1fr 1fr;
  gap: 28px;
  padding-top: 64px;
}
.col {
  background: rgba(12,36,36,0.5);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 20px;
}

/* Top Ten Songs */
.song-list { display: flex; flex-direction: column; gap: 4px; }
.song-row {
  display: grid;
  grid-template-columns: 24px 44px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 8px 6px;
  border-radius: 10px;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.song-row:hover { background: rgba(45,212,191,0.06); border-color: var(--border-subtle); }

/* Coming soon — sourceless tracks: visible but disabled */
.song-row.is-coming-soon,
.composer-item.is-coming-soon { opacity: 0.45; cursor: not-allowed; }
.song-row.is-coming-soon:hover,
.composer-item.is-coming-soon:hover { background: transparent; border-color: transparent; }
.song-row.is-coming-soon .play-btn,
.composer-item.is-coming-soon .composer-play { opacity: 0.4; cursor: not-allowed; pointer-events: none; }
.video-card.is-coming-soon { cursor: not-allowed; filter: saturate(0.5) brightness(0.7); }
.video-card.is-coming-soon:hover { transform: none; }
.video-coming-badge {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 2;
  font-family: var(--f-display); font-weight: 700; font-size: 11px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--text-secondary);
  border: 1px solid var(--border-default); border-radius: 999px;
  padding: 6px 14px; background: rgba(6, 22, 22, 0.7); backdrop-filter: blur(4px);
}
.video-card.is-coming-soon .video-overlay { background: linear-gradient(180deg, rgba(6,22,22,0.55), rgba(6,22,22,0.85)); }
.song-num { color: var(--text-secondary); font-family: var(--f-display); font-weight: 500; font-size: 14px; text-align: right; }
.song-thumb {
  width: 44px; height: 44px; border-radius: 8px; flex-shrink: 0;
  overflow: hidden; position: relative;
  background-size: cover; background-position: center 22%;
  border: 1px solid var(--border-subtle);
}
.song-text { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.song-title { font-size: 13px; font-weight: 500; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.song-artist { font-size: 11.5px; color: var(--text-secondary); }
.song-actions { display: flex; gap: 6px; align-items: center; }
/* Secondary actions (e.g. +): keep the ghost look. Play button uses the unified system below. */
.song-actions button:not(.play-btn) {
  width: 32px; height: 32px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--text-secondary);
  background: transparent;
  border: 1px solid var(--border-subtle);
  transition: color 160ms ease, background 160ms ease, border-color 160ms ease, transform 120ms ease;
}
.song-actions button:not(.play-btn):hover {
  color: var(--teal-primary);
  background: rgba(45,212,191,0.08);
  border-color: var(--border-strong);
}
.song-actions button:not(.play-btn):active { transform: scale(0.94); }
.song-actions button svg { width: 14px; height: 14px; }

/* Top Featured Videos */
.video-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.video-card {
  position: relative; aspect-ratio: 16/10;
  border-radius: var(--radius); overflow: hidden;
  cursor: pointer; isolation: isolate;
  border: 1px solid var(--border-subtle);
  background-color: var(--bg-card);
  background-size: cover; background-position: center 22%;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.video-card:hover { transform: translateY(-2px); box-shadow: 0 12px 40px -16px rgba(0,0,0,0.6); }
/* Dark overlay removed per design — keep the element so JS renders cleanly,
   but render nothing. */
.video-overlay { display: none; }
/* .video-play: visuals defined in UNIFIED PLAY BUTTONS section below.
   Anchored bottom-right so the artist's face stays visible. */
.video-play {
  position: absolute; right: 14px; bottom: 14px;
  z-index: 2;
}
.video-title {
  position: absolute; left: 12px; right: 68px; bottom: 10px;
  font-size: 11.5px; line-height: 1.3; color: var(--text-primary);
  font-weight: 500; z-index: 1;
  /* Keep readable without a full overlay behind it. */
  text-shadow:
    0 1px 2px rgba(0,0,0,0.85),
    0 2px 6px rgba(0,0,0,0.6);
}

/* Featured Composers */
.composer-list { display: flex; flex-direction: column; gap: 14px; }
.composer-item {
  display: grid; grid-template-columns: 48px 1fr; align-items: center; gap: 12px;
  padding: 6px 4px;
}
.composer-avatar {
  width: 48px; height: 48px; border-radius: 50%;
  background-size: cover; background-position: center 18%;
  border: 1px solid var(--border-strong);
}
.composer-meta { min-width: 0; }
.composer-name { font-family: var(--f-display); font-weight: 600; font-size: 14px; color: var(--text-primary); letter-spacing: -0.01em; }
.composer-role { font-size: 11.5px; color: var(--text-secondary); margin-top: 1px; }
.composer-tags { font-size: 11.5px; color: var(--teal-primary); margin-top: 2px; }
/* .composer-play: visuals defined in UNIFIED PLAY BUTTONS section below */

@media (max-width: 1100px) {
  .three-col { grid-template-columns: 1fr; }
}

/* ========================= STUDIOS ========================= */
.studios-section { padding-top: 64px; }
.studio-row {
  display: grid; grid-template-columns: repeat(5, minmax(0,1fr));
  gap: 14px;
}
.studio-card {
  position: relative; aspect-ratio: 16/10;
  border-radius: var(--radius); overflow: hidden;
  cursor: pointer; isolation: isolate;
  border: 1px solid var(--border-subtle);
  background-color: var(--bg-card);
  background-size: cover; background-position: center;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.studio-card:hover { transform: translateY(-3px); box-shadow: 0 18px 50px -20px rgba(0,0,0,0.7); }
/* Dark gradient overlay removed per design. */
.studio-meta {
  position: absolute; left: 14px; right: 14px; bottom: 12px; z-index: 1;
  display: flex; align-items: center; gap: 8px;
}
.studio-pin {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--teal-primary); color: var(--text-on-teal);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.studio-text { line-height: 1.15; }
.studio-city {
  font-family: var(--f-body); font-weight: 700; font-size: 13.5px;
  color: var(--text-primary); letter-spacing: 0.06em; text-transform: uppercase;
}
.studio-country {
  font-size: 10.5px;
  color: #000;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-top: 2px;
  /* Tight 1px white outline (8 directions) so the black text reads on any
     photo, light or dark. */
  text-shadow:
    -1px -1px 0 #fff,
     1px -1px 0 #fff,
    -1px  1px 0 #fff,
     1px  1px 0 #fff,
     0   -1px 0 #fff,
     0    1px 0 #fff,
    -1px  0   0 #fff,
     1px  0   0 #fff;
}

@media (max-width: 1100px) {
  .studio-row {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 280px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 8px;
  }
  .studio-card { scroll-snap-align: start; }
}

/* ========================= FEATURE STRIP ========================= */
.features-strip {
  margin-top: 64px;
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  padding: 28px var(--pad-x);
  background: rgba(45,212,191,0.05);
  border-top: 1px solid var(--border-subtle);
  border-bottom: 1px solid var(--border-subtle);
}
.feature { display: flex; align-items: center; gap: 14px; color: var(--text-primary); }
.feature svg { color: var(--teal-primary); flex-shrink: 0; }
.feature-text h3 {
  font-family: var(--f-body); font-weight: 700; font-size: 12.5px;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-primary);
}
.feature-text p { font-size: 12px; color: var(--text-secondary); margin-top: 4px; }

@media (max-width: 1024px) { .features-strip { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .features-strip { grid-template-columns: 1fr; } }

/* ========================= FOOTER ========================= */
.site-footer {
  margin-top: 64px;
  padding-top: 48px;
  background: linear-gradient(180deg, rgba(6,22,22,0.4), rgba(6,22,22,1));
  border-top: 1px solid var(--border-subtle);
}
.footer-top {
  display: grid;
  grid-template-columns: 1.4fr repeat(4, 1fr) 1.1fr;
  gap: 32px;
  padding-bottom: 40px;
}
.footer-brand { max-width: 240px; }
.footer-brand .logo { margin-bottom: 14px; }
.footer-tag { font-size: 12px; color: var(--text-secondary); line-height: 1.55; }
.footer-credit { font-size: 11px; color: var(--text-muted); margin-top: 12px; letter-spacing: 0.04em; }
.footer-credit a { color: var(--text-muted); border-bottom: 1px dotted var(--text-muted); }
.footer-credit a:hover { color: var(--teal-primary); border-color: var(--teal-primary); }

.footer-col h4 {
  font-family: var(--f-body); font-weight: 700; font-size: 12px;
  letter-spacing: 0.18em; color: var(--text-primary); margin-bottom: 14px; text-transform: uppercase;
}
.footer-col ul { display: flex; flex-direction: column; gap: 8px; }
.footer-col a { font-size: 13px; color: var(--text-secondary); }
.footer-col a:hover { color: var(--teal-primary); }

.footer-connect .socials { display: flex; gap: 8px; margin-bottom: 14px; }
.footer-connect .socials a {
  width: 34px; height: 34px; border-radius: 8px;
  background: rgba(45,212,191,0.08);
  border: 1px solid var(--border-subtle);
  color: var(--text-secondary);
  display: inline-flex; align-items: center; justify-content: center;
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
.footer-connect .socials a:hover { background: rgba(45,212,191,0.18); color: var(--teal-primary); border-color: var(--border-strong); }
.contact-line { font-size: 13px; color: var(--text-primary); }
.contact-line a { color: var(--text-primary); }
.contact-line a:hover { color: var(--teal-primary); }

.footer-bottom {
  border-top: 1px solid var(--border-subtle);
  padding: 20px var(--pad-x);
  text-align: center;
  font-size: 12px; color: var(--text-secondary);
}

@media (max-width: 1100px) {
  .footer-top { grid-template-columns: 1fr 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; max-width: none; }
}
@media (max-width: 640px) { .footer-top { grid-template-columns: 1fr 1fr; } }

/* ========================= CUSTOM EXPANDABLE PLAYER ========================= */
.ws-player {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 1000;
  pointer-events: none;
}
.ws-player[data-state="hidden"] { display: none; }

.ws-player__backdrop {
  position: fixed; inset: 0;
  background: rgba(6, 22, 22, 0.85);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity 280ms ease-out;
  pointer-events: none;
}
.ws-player[data-state="expanded"] .ws-player__backdrop {
  opacity: 1;
  /* Stay transparent to clicks so a click outside the panel can both collapse
     the expanded view AND start playing the thing the user clicked, in one
     click. The document handler in script.js does that. */
  pointer-events: none;
}

.ws-player__panel {
  position: fixed; left: 0; right: 0; bottom: 0;
  background: var(--bg-card);
  border-top: 1px solid var(--border-subtle);
  pointer-events: auto;
  transform: translateY(100%);
  transition:
    transform 320ms cubic-bezier(0.2, 0.8, 0.2, 1),
    height   380ms cubic-bezier(0.2, 0.8, 0.2, 1);
  height: 88px;
  overflow: hidden;
  box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.4);
}
.ws-player[data-state="collapsed"] .ws-player__panel,
.ws-player[data-state="expanded"]  .ws-player__panel {
  transform: translateY(0);
}
.ws-player[data-state="expanded"] .ws-player__panel {
  height: 65vh;
  min-height: 480px;
  border-radius: 18px 18px 0 0;
}

.ws-player__bar {
  display: grid;
  grid-template-columns: minmax(220px, 280px) 1fr auto auto auto auto;
  gap: 18px;
  align-items: center;
  height: 88px;
  padding: 0 24px;
  border-bottom: 1px solid var(--border-subtle);
  background: linear-gradient(180deg, var(--bg-card-elevated), var(--bg-card));
}

.ws-player__track { display: flex; align-items: center; gap: 12px; min-width: 0; }
.ws-player__art {
  width: 56px; height: 56px;
  border-radius: 8px; object-fit: cover; object-position: 50% 22%;
  flex-shrink: 0;
  background: var(--bg-card-elevated);
}
.ws-player__meta { min-width: 0; }
.ws-player__title {
  font-family: var(--f-body); font-weight: 500; font-size: 14px;
  color: var(--text-primary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ws-player__artist {
  font-family: var(--f-body); font-weight: 400; font-size: 12px;
  color: var(--text-secondary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.ws-player__waveform { display: none; }

.ws-player__scrubber {
  display: flex; align-items: center; gap: 14px; min-width: 0;
}
.ws-player__progress {
  flex: 1;
  height: 22px;
  background: transparent;
  appearance: none; -webkit-appearance: none;
  cursor: pointer;
  outline: none;
  padding: 0;
  --progress: 0%;
}
.ws-player__progress::-webkit-slider-runnable-track {
  height: 6px;
  background: linear-gradient(90deg,
    var(--teal-bright) 0%,
    var(--teal-primary) var(--progress, 0%),
    rgba(160,181,181,0.18) var(--progress, 0%),
    rgba(160,181,181,0.18) 100%);
  border-radius: 999px;
}
.ws-player__progress::-moz-range-track {
  height: 6px;
  background: linear-gradient(90deg,
    var(--teal-bright) 0%,
    var(--teal-primary) var(--progress, 0%),
    rgba(160,181,181,0.18) var(--progress, 0%),
    rgba(160,181,181,0.18) 100%);
  border-radius: 999px;
}
.ws-player__progress::-webkit-slider-thumb {
  appearance: none; -webkit-appearance: none;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--teal-bright);
  cursor: pointer;
  border: 2px solid var(--bg-card);
  margin-top: -4px;
  box-shadow: 0 0 0 4px rgba(45,212,191,0.18);
  transition: box-shadow 140ms ease, transform 100ms ease;
}
.ws-player__progress::-moz-range-thumb {
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--teal-bright);
  cursor: pointer; border: 2px solid var(--bg-card);
  box-shadow: 0 0 0 4px rgba(45,212,191,0.18);
}
.ws-player__progress:hover::-webkit-slider-thumb,
.ws-player__progress:focus-visible::-webkit-slider-thumb {
  box-shadow: 0 0 0 6px rgba(45,212,191,0.25);
  transform: scale(1.08);
}
.ws-player__time-current,
.ws-player__time-total {
  font-family: ui-monospace, SFMono-Regular, monospace;
  font-size: 11.5px;
  min-width: 38px; text-align: center;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}
.ws-player__time-current { color: var(--teal-primary); }
.ws-player__time-total   { color: var(--text-muted); }

.ws-player__controls { display: flex; gap: 4px; align-items: center; }
.ws-player__btn {
  width: 36px; height: 36px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: var(--text-primary);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background-color 160ms ease, transform 100ms ease, color 160ms ease;
  padding: 0;
}
.ws-player__btn:hover { background: var(--bg-card-elevated); }
.ws-player__btn:active { transform: scale(0.94); }

/* .ws-player__btn--play: visuals defined in UNIFIED PLAY BUTTONS section below */

/* play/pause icon swap by data-playing on the button */
.ws-player__btn--play .ws-player__pause-icon { display: none; }
.ws-player__btn--play[data-playing="true"] .ws-player__play-icon { display: none; }
.ws-player__btn--play[data-playing="true"] .ws-player__pause-icon { display: block; }

.ws-player__volume { display: flex; align-items: center; gap: 8px; }
.ws-player__vol {
  width: 80px; height: 4px;
  background: var(--bg-card-elevated);
  border-radius: 999px;
  appearance: none; -webkit-appearance: none;
  cursor: pointer;
}
.ws-player__vol::-webkit-slider-thumb {
  appearance: none; -webkit-appearance: none;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--teal-primary);
  cursor: pointer; border: none;
}
.ws-player__vol::-moz-range-thumb {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--teal-primary);
  cursor: pointer; border: none;
}

.ws-player__btn--expand,
.ws-player__btn--close { color: var(--text-secondary); }
.ws-player[data-state="expanded"] .ws-player__btn--expand svg { transform: rotate(180deg); }

/* Expanded body */
.ws-player__body {
  display: none;
  height: calc(100% - 88px);
  grid-template-columns: 7fr 4fr;
  gap: 24px;
  padding: 24px;
  overflow: hidden;
}
.ws-player__queue { max-width: 460px; }
.ws-player[data-state="expanded"] .ws-player__body { display: grid; }

.ws-player__stage {
  background: var(--bg-deepest);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  position: relative;
}
/* Stage gradient overlays — top for bar contrast, bottom for any caption */
.ws-player__stage::before,
.ws-player__stage::after {
  content: "";
  position: absolute; left: 0; right: 0;
  pointer-events: none;
  z-index: 2;
}
.ws-player__stage::before {
  top: 0; height: 80px;
  background: linear-gradient(180deg, rgba(6,22,22,0.55) 0%, transparent 100%);
}
.ws-player__stage::after {
  bottom: 0; height: 120px;
  background: linear-gradient(0deg, rgba(6,22,22,0.7) 0%, transparent 100%);
}
/* Hide gradients while video plays (the video has its own UI) */
.ws-player[data-mode="video"][data-state="expanded"] .ws-player__stage::before,
.ws-player[data-mode="video"][data-state="expanded"] .ws-player__stage::after { display: none; }
.ws-player__video-wrap { width: 100%; height: 100%; display: none; }
.ws-player__video-wrap iframe { width: 100%; height: 100%; border: 0; display: block; }
.ws-player__local-video { width: 100%; height: 100%; display: none; background: var(--bg-deepest); object-fit: contain; }
.ws-player__art--large {
  width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 18%;
  background: var(--bg-deepest);
}
.ws-player[data-mode="video"][data-state="expanded"] .ws-player__video-wrap { display: block; }
.ws-player[data-mode="video"][data-state="expanded"] .ws-player__art--large { display: none; }
.ws-player[data-engine="local-video"][data-state="expanded"] .ws-player__local-video { display: block; }
.ws-player[data-engine="local-video"][data-state="expanded"] .ws-player__art--large,
.ws-player[data-engine="local-video"][data-state="expanded"] .ws-player__video-wrap { display: none; }

.ws-player__queue { overflow-y: auto; padding-right: 8px; }
.ws-player__queue-header {
  font-family: var(--f-display); font-weight: 700; font-size: 13px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--text-secondary);
  margin-bottom: 16px;
}
.ws-player__queue-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 2px; }
.ws-player__queue-item {
  display: grid;
  grid-template-columns: 28px 44px 1fr auto auto;
  gap: 14px; align-items: center;
  padding: 10px 12px;
  border-radius: 10px;
  cursor: pointer;
  position: relative;
  transition: background-color 160ms ease, transform 120ms ease;
}
.ws-player__queue-item:hover {
  background: rgba(45,212,191,0.08);
}
.ws-player__queue-item:hover .ws-player__queue-item__play {
  color: var(--teal-primary);
  background: rgba(45,212,191,0.15);
}
.ws-player__queue-item[data-active="true"] {
  background: linear-gradient(90deg, rgba(45,212,191,0.18), rgba(45,212,191,0.06));
  border-left: none;
}
.ws-player__queue-item[data-active="true"]::before {
  content: "";
  position: absolute; left: 0; top: 8px; bottom: 8px;
  width: 3px; border-radius: 0 2px 2px 0;
  background: var(--teal-primary);
  box-shadow: 0 0 12px var(--teal-glow);
}
.ws-player__queue-item[data-active="true"] .ws-player__queue-item__title { color: var(--teal-bright); }
.ws-player__queue-item[data-active="true"] .ws-player__queue-item__num   { color: var(--teal-primary); }
.ws-player__queue-item[data-active="true"] .ws-player__queue-item__play  {
  color: var(--teal-primary);
  background: transparent;
  border: 1px solid var(--border-strong);
  box-shadow: none;
}
.ws-player__queue-item__num {
  font-size: 12px; color: var(--text-muted);
  font-family: ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
  text-align: center;
}
.ws-player__queue-item__art {
  width: 44px; height: 44px;
  border-radius: 8px; object-fit: cover; object-position: 50% 22%;
  background: var(--bg-card-elevated);
  flex-shrink: 0;
}
.ws-player__queue-item__meta { min-width: 0; }
.ws-player__queue-item__title {
  font-size: 13.5px; font-weight: 500; color: var(--text-primary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: color 140ms ease;
}
.ws-player__queue-item__artist {
  font-size: 11.5px; color: var(--text-secondary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  margin-top: 1px;
}
.ws-player__queue-item__time {
  font-size: 11px; color: var(--text-muted);
  font-family: ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
}
.ws-player__queue-item__play {
  width: 32px; height: 32px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--text-secondary);
  background: rgba(45,212,191,0.04);
  transition: background 160ms ease, color 160ms ease, transform 120ms ease;
}
.ws-player__queue-item__play:active { transform: scale(0.92); }

/* Hidden iframe host (collapsed / audio-only — keeps playback alive offscreen) */
.ws-player__iframe-host {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  pointer-events: none;
}
.ws-player[data-mode="video"][data-state="expanded"] .ws-player__iframe-host {
  position: static;
  width: auto; height: 100%;
  clip: auto;
  pointer-events: auto;
}
.ws-player__iframe-host iframe { width: 100%; height: 100%; border: 0; }

/* Mobile */
@media (max-width: 768px) {
  .ws-player__bar {
    grid-template-columns: 1fr auto auto auto;
    height: 72px;
    padding: 0 14px;
    gap: 10px;
  }
  .ws-player__waveform,
  .ws-player__scrubber,
  .ws-player__volume,
  .ws-player__btn[data-action="prev"],
  .ws-player__btn[data-action="next"] { display: none; }
  .ws-player__art {
    width: 48px; height: 48px;
    border-radius: 10px;
  }
  .ws-player__track { gap: 14px; }
  .ws-player__title { font-size: 14.5px; font-weight: 500; }
  .ws-player__artist { font-size: 12.5px; }
  .ws-player__btn { width: 40px; height: 40px; }
  .ws-player__btn--play { width: 48px; height: 48px; }
  .ws-player__btn--play svg { width: 18px; height: 18px; }
  .ws-player__btn--expand svg,
  .ws-player__btn--close svg { width: 18px; height: 18px; }

  .ws-player[data-state="expanded"] .ws-player__panel { height: 100vh; border-radius: 0; }
  .ws-player[data-state="expanded"] .ws-player__body {
    grid-template-columns: 1fr;
    grid-template-rows: 38vh 1fr;
    padding: 16px;
    gap: 14px;
  }
  /* Expanded mobile: bar at very top, then stage, then queue */
  .ws-player[data-state="expanded"] .ws-player__bar {
    border-bottom: 1px solid var(--border-subtle);
  }
  .ws-player__queue-header {
    font-size: 12px;
    margin-bottom: 10px;
  }
  .ws-player__queue-item {
    grid-template-columns: 24px 40px 1fr auto;
    padding: 10px 8px;
  }
  .ws-player__queue-item__time { display: none; }
  .ws-player__queue-item__art { width: 40px; height: 40px; }
}

/* Page padding when bar visible (so content isn't covered) */
body[data-player-visible="true"] { padding-bottom: 88px; }
@media (max-width: 768px) {
  body[data-player-visible="true"] { padding-bottom: 64px; }
}

/* ========================= REVEAL ON SCROLL ========================= */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.55s ease, transform 0.55s ease; }
.reveal.in { opacity: 1; transform: translateY(0); }

/* ========================= SECTION RHYTHM (refinement FIX 3) ========================= */
@media (max-width: 1024px) {
  .browse-section, .artists-section, .three-col, .studios-section { padding-top: 48px; }
  .prod-library, .features-strip, .site-footer { margin-top: 48px; }
}
@media (max-width: 768px) {
  .browse-section, .artists-section, .three-col, .studios-section { padding-top: 36px; }
  .prod-library, .features-strip, .site-footer { margin-top: 36px; }
}

/* ========================= LARGE DESKTOPS ========================= */
@media (min-width: 1900px) { :root { --container: 1480px; } }
@media (min-width: 2400px) {
  :root { --container: 1720px; }
  .hero-title { font-size: 96px; }
}

/* ===========================================================
   ACTION BUTTON SYSTEM — match the song-row look (subtle grey icon,
   barely-visible teal border, lights up on hover)
   =========================================================== */
.play-btn,
.composer-play,
.artist-play,
.video-play {
  background: transparent;
  color: var(--text-secondary);
  border: 1px solid var(--border-subtle);
  box-shadow: none;
  transition:
    transform 180ms cubic-bezier(0.2,0.8,0.2,1),
    background 200ms ease,
    color 180ms ease,
    border-color 200ms ease;
  cursor: pointer;
}
.play-btn { width: 32px; height: 32px; }
.composer-play { width: 34px; height: 34px; }
.artist-play  { width: 36px; height: 36px; }
.video-play   { width: 52px; height: 52px; }

.play-btn:hover,
.composer-play:hover,
.artist-play:hover,
.video-play:hover {
  background: rgba(45,212,191,0.08);
  color: var(--teal-primary);
  border-color: var(--border-strong);
  transform: scale(1.06);
}
.play-btn:active,
.composer-play:active,
.artist-play:active,
.video-play:active {
  transform: scale(0.94);
  transition-duration: 80ms;
}
/* Optical-center the play triangle — the icon is right-pointing, looks off-center otherwise */
.play-btn svg,
.composer-play svg,
.artist-play svg,
.video-play svg {
  margin-left: 2px;
}
.play-btn svg { width: 13px; height: 13px; }
.composer-play svg { width: 13px; height: 13px; }
.artist-play svg { width: 14px; height: 14px; }
.video-play svg { width: 18px; height: 18px; }

/* Disabled (coming soon) state — desaturated, no glow */
.play-btn[disabled],
.song-row.is-coming-soon .play-btn,
.composer-item.is-coming-soon .composer-play {
  background: transparent;
  color: var(--text-muted);
  border-color: var(--border-subtle);
  box-shadow: none;
  cursor: not-allowed;
  pointer-events: none;
}

/* ===========================================================
   MOBILE POLISH — phones (≤768px) and small phones (≤480px)
   Goal: a deliberate, professional read at touch sizes.
   =========================================================== */
@media (max-width: 768px) {
  :root {
    --header-h: 64px;
    --pad-x: 18px;
  }

  /* Mobile: keep the lighter teal band from the top extended through the
     entire page so the site doesn't read as a wall of black on a phone.
     Subtle radial highlight at the top for depth. */
  body {
    background:
      radial-gradient(900px 500px at 50% -10%, rgba(94, 234, 212, 0.06), transparent 60%),
      #1F4646;
  }

  /* HEADER — light teal band at top that fades softly at its bottom edge
     so it bleeds into the photo below. Turns solid dark when scrolled. */
  .site-header {
    background: linear-gradient(180deg,
      #1F4646 0%,
      #1F4646 55%,
      rgba(31,70,70,0.8) 80%,
      rgba(31,70,70,0.45) 100%);
  }
  .site-header::before { display: none; }
  .site-header.scrolled {
    background: rgba(6,22,22,0.92);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom-color: var(--border-subtle);
    box-shadow: 0 8px 24px -12px rgba(0,0,0,0.6);
  }
  .logo-img { height: 48px; }
  .hamburger {
    width: 40px; height: 40px;
    border-color: rgba(45,212,191,0.25);
  }
  .nav-container { gap: 12px; }

  /* HERO — full panorama banner BELOW the transparent header so the
     artist isn't ever obscured by the logo. The header stays transparent
     at the very top (showing body bg) and turns solid dark on scroll. */
  .hero {
    display: flex;
    flex-direction: column;
    min-height: auto; max-height: none;
    padding: 0;
    margin-top: 0;
    align-items: stretch;
    overflow: hidden;
  }
  .hero-photo {
    position: relative;
    inset: auto;
    width: 100%;
    aspect-ratio: 3.27 / 1;
    background-size: cover;
    background-position: center;
    z-index: 0;
    /* Lift the photo on mobile — no text overlays it, so we don't need the darkening */
    filter: saturate(1.12) brightness(1.08) contrast(1.04);
  }
  /* Soft blend: top fades into header dark, bottom fades into content area below.
     Pseudo-elements layered ON TOP of the photo so the filter on .hero-photo
     does not affect the blend itself. */
  .hero-photo::before,
  .hero-photo::after {
    content: "";
    position: absolute;
    left: 0; right: 0;
    pointer-events: none;
    z-index: 1;
  }
  /* Top fade — blends the photo into the light teal header band above.
     Picks up from the header's bottom (which is itself fading) so the two
     gradients meet seamlessly and the bar/photo boundary disappears. */
  .hero-photo::before {
    top: 0; height: 50%;
    background: linear-gradient(180deg,
      rgba(31,70,70,0.92) 0%,
      rgba(31,70,70,0.75) 15%,
      rgba(31,70,70,0.4) 45%,
      rgba(31,70,70,0.0) 100%);
  }
  .hero-photo::after {
    content: "";
    position: absolute;
    left: 0; right: 0;
    bottom: 0; height: 45%;
    pointer-events: none;
    z-index: 1;
    /* Fade into the mobile page bg (#1F4646) so the hero blends seamlessly
       into the Browse section below. */
    background: linear-gradient(0deg,
      #1F4646 0%,
      rgba(31,70,70,0.55) 35%,
      rgba(31,70,70,0.0) 100%);
  }
  .hero-overlay { display: none; }
  .hero-content {
    padding: 32px var(--pad-x) 40px;
    text-align: center;
    background: #1F4646;
  }
  .hero-divider { display: none; }
  .hero-title {
    font-size: clamp(28px, 8vw, 38px);
    line-height: 1.05;
    margin-bottom: 14px;
    letter-spacing: -0.02em;
  }
  .hero-title-line { display: inline-block; white-space: nowrap; }
  .hero-br { display: inline; }
  .hero-sub {
    font-size: 14.5px;
    line-height: 1.5;
    margin-bottom: 26px;
    max-width: 320px; margin-left: auto; margin-right: auto;
  }
  .hero-ctas {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    max-width: 360px;
    margin: 0 auto;
  }
  .hero-cta {
    padding: 13px 10px;
    font-size: 11px;
    letter-spacing: 0.08em;
    gap: 8px;
    justify-content: center;
    width: 100%;
    flex: none;
  }
  .hero-cta svg { width: 16px; height: 16px; }

  /* SECTION TITLES — bump for confident read */
  .section-title {
    font-size: 14.5px;
    letter-spacing: 0.13em;
    line-height: 1.2;
    min-width: 0;
  }
  .section-head {
    margin-bottom: 14px;
    gap: 12px;
    align-items: baseline;
  }
  .view-all { font-size: 12px; flex-shrink: 0; white-space: nowrap; }

  /* BROWSE TILES */
  .browse-section { gap: 18px; padding-top: 32px; }
  .browse-col {
    padding: 16px 12px;
    border-radius: 16px;
    /* Lighter panel on the mobile teal bg — matches the production library. */
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.09);
  }
  .tile-grid { gap: 10px 6px; }
  .tile-box {
    max-width: 52px;
    border-radius: 12px;
    /* Replace the dark vertical gradient with a soft lift so tiles sit
       above the lighter panel instead of cutting black holes into it. */
    background: rgba(255, 255, 255, 0.07);
    border-color: rgba(255, 255, 255, 0.12);
  }
  .tile-cell:hover .tile-box {
    background: rgba(45, 212, 191, 0.18);
    border-color: var(--border-strong);
  }
  .tile-box svg { width: 20px; height: 20px; }
  .tile-label { font-size: 10px; letter-spacing: 0.03em; }

  /* PRODUCTION LIBRARY */
  .prod-library {
    gap: 18px;
    padding: 18px;
    margin-top: 32px;
    border-radius: 16px;
    /* Lighter panel on the mobile teal bg — reads as elevated, not sunken. */
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.09);
  }
  .prod-image {
    min-height: 180px;
    /* Lighter fallback gradient that matches the new mobile bg. */
    background: linear-gradient(135deg, #1F4646 0%, #2A5757 50%, #1F4646 100%);
  }
  .prod-title { font-size: 22px; letter-spacing: 0.04em; }
  .prod-stats { font-size: 11.5px; letter-spacing: 0.1em; line-height: 1.5; }
  .prod-pills { gap: 8px; }
  .pill { font-size: 12px; }
  .prod-side { width: 100%; }
  .prod-side .btn-lg { width: 100%; justify-content: center; padding: 14px 18px; }
  .prod-tagline { font-size: 12.5px; line-height: 1.5; }

  /* ARTISTS / STUDIOS — horizontal scrollers with fade affordance */
  .artists-section,
  .studios-section {
    padding-top: 32px;
    position: relative;
  }
  .artist-row,
  .studio-row {
    grid-auto-columns: 144px;
    gap: 12px;
    padding-left: var(--pad-x);
    padding-right: var(--pad-x);
    margin-left: calc(var(--pad-x) * -1);
    margin-right: calc(var(--pad-x) * -1);
    scroll-padding-left: var(--pad-x);
    -webkit-overflow-scrolling: touch;
  }
  .studio-row { grid-auto-columns: 240px; }
  .artist-name { font-size: 13px; }
  .artist-country { font-size: 11px; }

  /* fade hint at right edge so users know it scrolls — fade to the mobile body bg
     so it disappears into the page instead of reading as a dark overlay. */
  .artists-section::after,
  .studios-section::after {
    content: "";
    position: absolute;
    right: 0; bottom: 8px;
    width: 40px;
    height: calc(100% - 60px);
    background: linear-gradient(90deg, transparent, #1F4646 90%);
    pointer-events: none;
    z-index: 1;
  }

  /* THREE-COL PANELS */
  .three-col { gap: 18px; padding-top: 32px; }
  .col { padding: 16px 14px; border-radius: 16px; }
  .song-row {
    grid-template-columns: 22px 42px 1fr auto;
    gap: 10px;
    padding: 9px 4px;
  }
  .song-num { font-size: 13px; }
  .song-thumb { width: 42px; height: 42px; }
  .song-title { font-size: 13.5px; }
  .song-artist { font-size: 12px; }
  .song-actions button { width: 32px; height: 32px; }

  .video-grid { gap: 10px; }
  /* Remove the dark overlay on video cards — let the photo show clean */
  .video-overlay { display: none; }
  /* Smaller play button, anchored bottom-right so the artist image stays visible */
  .video-play {
    width: 36px; height: 36px;
    top: auto; left: auto;
    right: 10px; bottom: 10px;
    transform: none;
  }
  .video-play svg { width: 14px; height: 14px; }
  .video-card:hover .video-play { transform: scale(1.08); }
  /* Title shares the bottom row with the play button — pad the right so they don't overlap.
     Strong text-shadow keeps it legible without needing a dark overlay. */
  .video-title {
    font-size: 11px;
    left: 10px;
    right: 56px;     /* leaves room for the 36px play btn + 10px gap + 10px right offset */
    bottom: 12px;
    line-height: 1.25;
    text-shadow:
      0 1px 2px rgba(0,0,0,0.85),
      0 2px 6px rgba(0,0,0,0.7);
  }

  .composer-item { grid-template-columns: 44px 1fr; gap: 11px; padding: 7px 2px; }
  .composer-avatar { width: 44px; height: 44px; }
  .composer-name { font-size: 13.5px; }
  .composer-role,
  .composer-tags { font-size: 11.5px; }

  /* FEATURES STRIP */
  .features-strip { gap: 14px; padding: 22px var(--pad-x); margin-top: 32px; }
  .feature-text h3 { font-size: 12px; letter-spacing: 0.14em; }
  .feature-text p { font-size: 12px; }

  /* FOOTER */
  .site-footer { margin-top: 32px; padding-top: 36px; }
  .footer-top { gap: 24px 20px; padding-bottom: 32px; }
  .footer-brand .logo-img { height: 48px; }
  .footer-col h4 { font-size: 11.5px; margin-bottom: 10px; }
  .footer-col a { font-size: 13px; }
  .footer-bottom { font-size: 11.5px; padding: 16px var(--pad-x); }
}

/* Small phones — extra tightening so 360px Android feels deliberate */
@media (max-width: 400px) {
  .hero-sub { font-size: 14px; margin-bottom: 22px; }
  .hero-cta { padding: 12px 8px; font-size: 10.5px; }
  .hero-cta svg { display: none; }
  .tile-label { font-size: 9.5px; }
  .tile-box { max-width: 48px; }
  .tile-box svg { width: 18px; height: 18px; }
  .prod-pills { grid-template-columns: 1fr; }
  .artist-row { grid-auto-columns: 132px; }
  .studio-row { grid-auto-columns: 220px; }
  .footer-top { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
}

/* =================================================================
   UNIFIED PLAY BUTTONS
   One visual language across every play button on the site:
     - gradient teal fill + inner highlight
     - soft outer glow that deepens on hover
     - ripple ring that expands on hover
     - 1px right-nudge on the play triangle for optical balance
     - cinematic resting pulse on the large video-card play
     - "now playing" 3-bar equalizer that replaces the icon
     - focus-visible ring for keyboard nav
   ================================================================= */

.artist-play,
.video-play,
.composer-play,
.song-actions .play-btn,
.ws-player__btn--play {
  position: relative;
  border: 0;
  padding: 0;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  color: var(--text-on-teal);
  background:
    radial-gradient(120% 120% at 30% 20%, rgba(255,255,255,0.28), transparent 55%),
    linear-gradient(135deg, var(--teal-bright) 0%, var(--teal-primary) 55%, var(--teal-deep) 100%);
  box-shadow:
    0 6px 20px -6px var(--teal-glow),
    inset 0 1px 0 rgba(255,255,255,0.22),
    inset 0 -1px 0 rgba(0,0,0,0.18);
  transition:
    transform 220ms cubic-bezier(0.2,0.8,0.2,1),
    box-shadow 220ms ease,
    filter 220ms ease;
  isolation: isolate;
}

/* Position override for absolutely-positioned variants is preserved by their own rules
   (.artist-play uses absolute bottom-left; .video-play uses absolute center). */

/* Size + position variants — re-assert position:absolute on the variants that
   need it, since the shared base sets position:relative for the pseudo rings. */
.artist-play           { position: absolute; width: 36px; height: 36px; }
.video-play            { position: absolute; width: 44px; height: 44px; }
.composer-play         { width: 32px; height: 32px; }
.song-actions .play-btn { width: 32px; height: 32px; }
.ws-player__btn--play  { width: 48px; height: 48px; }

/* Icon — drop the play triangle 1px to the right of geometric center for optical balance.
   The pause icon stays centered. */
.artist-play svg,
.video-play svg,
.composer-play svg,
.song-actions .play-btn svg,
.ws-player__btn--play .ws-player__play-icon {
  transform: translateX(1px);
  filter: drop-shadow(0 1px 0 rgba(0,0,0,0.22));
}
.ws-player__btn--play .ws-player__pause-icon {
  filter: drop-shadow(0 1px 0 rgba(0,0,0,0.22));
}
/* Bigger icon inside the cinematic video play */
.video-play svg { width: 16px; height: 16px; }

/* Ripple ring — appears and expands on hover */
.artist-play::before,
.video-play::before,
.composer-play::before,
.song-actions .play-btn::before,
.ws-player__btn--play::before {
  content: "";
  position: absolute; inset: -4px;
  border-radius: 50%;
  border: 1px solid rgba(94,234,212,0.5);
  opacity: 0;
  transform: scale(0.86);
  transition: transform 280ms cubic-bezier(0.2,0.8,0.2,1), opacity 220ms ease;
  pointer-events: none;
}
.video-play::before { inset: -6px; border-width: 1.5px; }

/* Hover state — applies whether you hover the button itself OR the parent card */
.artist-card:hover .artist-play,
.video-card:hover .video-play,
.composer-item:hover .composer-play,
.song-row:hover .play-btn,
.song-actions .play-btn:hover,
.ws-player__btn--play:hover {
  filter: brightness(1.08);
  box-shadow:
    0 12px 32px -8px var(--teal-glow),
    inset 0 1px 0 rgba(255,255,255,0.28),
    inset 0 -1px 0 rgba(0,0,0,0.22);
}
.artist-card:hover .artist-play { transform: scale(1.08); }
.composer-item:hover .composer-play,
.song-row:hover .play-btn,
.song-actions .play-btn:hover,
.ws-player__btn--play:hover { transform: scale(1.07); }
.video-card:hover .video-play { transform: scale(1.08); }

.artist-card:hover .artist-play::before,
.video-card:hover .video-play::before,
.composer-item:hover .composer-play::before,
.song-row:hover .play-btn::before,
.song-actions .play-btn:hover::before,
.ws-player__btn--play:hover::before {
  opacity: 1;
  transform: scale(1);
}

/* Active press */
.artist-play:active           { transform: scale(0.94); transition-duration: 80ms; }
.composer-play:active,
.song-actions .play-btn:active,
.ws-player__btn--play:active  { transform: scale(0.94); transition-duration: 80ms; }
.video-play:active            { transform: scale(0.94); transition-duration: 80ms; }

/* Focus-visible — keyboard accessibility */
.artist-play:focus-visible,
.video-play:focus-visible,
.composer-play:focus-visible,
.song-actions .play-btn:focus-visible,
.ws-player__btn--play:focus-visible {
  outline: 2px solid var(--teal-bright);
  outline-offset: 3px;
}

/* (Resting pulse ring removed — it extended past the play button and read as
   "pieces sticking out of the card". Hover ripple below provides the affordance.) */

/* ================== NOW PLAYING EQUALIZER ==================
   When a card's track is the active one in the bottom player, JS adds .is-playing
   to the corresponding play button and injects <span class="ws-eq"><i><i><i></span>.
   Three bars animate when the player is playing; freeze when paused. */

.artist-play.is-playing > svg,
.video-play.is-playing > svg,
.composer-play.is-playing > svg,
.song-actions .play-btn.is-playing > svg { display: none; }

.ws-eq {
  display: inline-flex;
  align-items: flex-end;
  justify-content: center;
  gap: 2px;
  height: 42%;
  width: 42%;
}
.ws-eq i {
  display: block;
  width: 2px;
  background: currentColor;
  border-radius: 1px;
  height: 100%;
  transform-origin: center bottom;
  animation: ws-eq-bar 900ms ease-in-out infinite;
  filter: drop-shadow(0 1px 0 rgba(0,0,0,0.18));
}
.ws-eq i:nth-child(1) { animation-duration: 1000ms; animation-delay:   0ms; }
.ws-eq i:nth-child(2) { animation-duration: 1300ms; animation-delay: 180ms; }
.ws-eq i:nth-child(3) { animation-duration:  820ms; animation-delay: 320ms; }

/* Bigger bars inside the large video-card play */
.video-play .ws-eq { gap: 3px; height: 36%; width: 36%; }
.video-play .ws-eq i { width: 3px; border-radius: 1.5px; }

/* Freeze the animation when the player is paused */
.is-playing[data-player-state="paused"] .ws-eq i {
  animation-play-state: paused;
}

@keyframes ws-eq-bar {
  0%, 100% { transform: scaleY(0.30); }
  50%      { transform: scaleY(1.00); }
}

@media (prefers-reduced-motion: reduce) {
  .ws-eq i { animation: none; height: 70%; }
}

/* Artist cards: no play affordance — they're aspirational tiles, not playable.
   Hidden everywhere (desktop + mobile + touch). */
.artist-play { display: none; }

/* Re-assert mobile play-button sizing/positioning. The unified system above
   uses desktop sizes; here we tune them down for phones so they don't
   dominate small cards. */
@media (max-width: 768px) {
  /* Top Featured Videos: shrink the play and anchor bottom-right so the
     artist's face stays visible. */
  .video-play {
    width: 38px; height: 38px;
    top: auto; left: auto;
    right: 10px; bottom: 10px;
    transform: none;
  }
  .video-play svg { width: 14px; height: 14px; transform: translateX(1px); }
  .video-card:hover .video-play { transform: scale(1.06); }
  .video-play:active { transform: scale(0.94); }
  /* Tighter ripple so it never overshoots the small card */
  .video-play::before { inset: -3px; }

  /* Top Ten + Composers: tighten the play buttons too so they feel sized to
     the row, not bigger than the artwork next to them. */
  .song-actions .play-btn { width: 30px; height: 30px; }
  .composer-play          { width: 30px; height: 30px; }
  .song-actions .play-btn svg,
  .composer-play svg { width: 12px; height: 12px; transform: translateX(1px); }

  /* Reserve room for the new bottom-right play and pad the title accordingly. */
  .video-title {
    left: 10px;
    right: 58px;
    bottom: 14px;
    font-size: 11px;
    line-height: 1.25;
    text-shadow:
      0 1px 2px rgba(0,0,0,0.85),
      0 2px 6px rgba(0,0,0,0.7);
  }
}

/* ============ UNIVERSAL SEARCH ============ */
.search-section {
  max-width: 860px;
  margin: 0 auto;
  padding: 64px 24px;
  text-align: center;
}
.search-head { margin-bottom: 26px; }
.search-sub {
  margin: 10px 0 0;
  color: var(--text-secondary);
  font-family: var(--f-body);
  font-size: 15px;
}
.search-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--bg-card);
  border: 1px solid rgba(45,212,191,0.22);
  border-radius: 999px;
  padding: 8px 8px 8px 20px;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.search-bar:focus-within {
  border-color: var(--teal-primary);
  box-shadow: 0 0 0 4px var(--teal-glow);
}
.search-icon { color: var(--teal-primary); display: flex; flex: 0 0 auto; }
.search-input {
  flex: 1 1 auto;
  min-width: 0;
  background: transparent;
  border: none;
  outline: none;
  color: var(--text-primary);
  font-family: var(--f-body);
  font-size: 16px;
  padding: 12px 4px;
}
.search-input::placeholder { color: var(--text-muted); }
.search-submit { flex: 0 0 auto; border-radius: 999px; }

.search-results {
  margin-top: 22px;
  text-align: left;
  display: grid;
  gap: 8px;
}
.search-result {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  background: var(--bg-card);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 8px;
  color: var(--text-primary);
  text-decoration: none;
  transition: border-color .18s ease, background .18s ease;
}
.search-result:hover { border-color: var(--teal-primary); background: var(--bg-card-elevated); }
.search-result .sr-type {
  font-family: var(--f-body);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--teal-primary);
  flex: 0 0 82px;
}
.search-result .sr-label { font-family: var(--f-body); font-weight: 500; font-size: 15px; }
.search-result .sr-meta { color: var(--text-secondary); font-size: 13px; margin-left: auto; text-align: right; }
.search-empty { color: var(--text-muted); padding: 16px; font-family: var(--f-body); }

@media (max-width: 560px) {
  .search-bar { border-radius: 16px; }
  .search-result { flex-wrap: wrap; gap: 6px 14px; }
  .search-result .sr-meta { margin-left: 0; }
}