/* ════════════════════════════════════════════════════════════════════
   Music page — stats, services, partners, clients, CTA
   Shares tokens/layout with site.css; loaded after it.
   ════════════════════════════════════════════════════════════════════ */

/* #region stat strip */
/* ─── stat strip ─────────────────────────────────────────────────── */
.ms-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;background:var(--border);
  border:1.5px solid var(--border);border-radius:18px;overflow:hidden}
.ms-stats .stat{background:var(--ink-850);padding:clamp(28px,3.5vw,44px)}
.ms-stats .stat span{font-size:12.5px;letter-spacing:.04em;text-transform:none;opacity:.7;max-width:34ch}
/* #endregion */

/* #region services grid */
/* ─── services grid ──────────────────────────────────────────────── */
/* two service cards (uses shared .card from site.css) */
.svc-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-top:36px}
.svc-grid .card h3{font-family:var(--stamp);font-size:24px;text-transform:uppercase;letter-spacing:.01em;margin-bottom:10px}
.svc-grid .card p{font-size:14.5px;opacity:.75;line-height:1.55}
.svc-grid .card .n{font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--acc);display:block;margin-bottom:14px}
/* supporting image pair below the cards */
.svc-imgs{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:18px}
.svc-imgs .cell{aspect-ratio:4/3;border-radius:16px;overflow:hidden;border:1.5px solid var(--border)}
.svc-imgs img{width:100%;height:100%;object-fit:cover;filter:contrast(1.05) saturate(1.05)}
/* #endregion */

/* #region "how we help" text block */
/* ─── "how we help" text block ───────────────────────────────────── */
/* copy column beside a stacked list of partner entries */
.help-grid{display:grid;grid-template-columns:1.15fr 1fr;gap:clamp(36px,5vw,72px);align-items:start}
.help-grid p{font-size:16px;opacity:.82;margin-top:18px;max-width:48ch}
.partner{border-top:1px solid var(--border);padding:20px 0}
.partner strong{display:block;font-size:16px;font-weight:600;margin-bottom:4px}
.partner span{font-size:14px;opacity:.65}
/* #endregion */

/* #region client logo marquee */
/* ─── client logo marquee ────────────────────────────────────────── */
/* heading row above the scrolling logo strip (see .marquee in site.css) */
.clients-head{display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:12px;margin-bottom:30px}
.clients-head p{font-size:14px;opacity:.6}
/* logos — dimmed/mono by default, brighten on row hover */
.client img{height:60px;width:auto;opacity:.62;filter:grayscale(1) brightness(1.6);transition:opacity .25s,filter .25s}
.marquee:hover .client img{opacity:.8}
/* wider gaps to match the larger logos */
.page-music .marquee-track{gap:84px}
/* wrapper around the duplicated (aria-hidden) marquee half — no box of its own */
.mq-dup{display:contents}
/* #endregion */

/* #region recent work */
/* ─── recent work ────────────────────────────────────────────────── */
/* two embeds (YouTube + Spotify) side by side below the clients marquee */
.rw-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,3vw,32px);align-items:start;margin-top:28px}
.rw-embed{border-radius:16px;overflow:hidden;border:1.5px solid var(--border);background:var(--ink-850)}
.rw-embed.video{position:relative;aspect-ratio:16/9}
.rw-embed.video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.rw-embed.audio iframe{display:block;width:100%;height:352px;border:0}
/* #endregion */

/* #region CTA banner */
/* ─── CTA banner ─────────────────────────────────────────────────── */
/* copy beside a framed image */
.cta-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(28px,4vw,56px);align-items:center;
  background:var(--ink-850);border:1.5px solid var(--border);border-radius:20px;overflow:hidden;padding:clamp(32px,4vw,56px)}
.cta-grid h2{margin-bottom:26px}
.cta-img{border-radius:14px;overflow:hidden;border:1.5px solid var(--border)}
.cta-img img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3}
/* #endregion */

/* #region responsive */
/* ─── responsive ─────────────────────────────────────────────────── */
@media(max-width:820px){.ms-stats,.svc-grid,.svc-imgs,.help-grid,.cta-grid,.rw-grid{grid-template-columns:1fr}}
/* #endregion */