/* Sound Impulse — Showstopper tier: premium event-production look on top of the Pro components (pro.css). */

/* ---------- calmer system: precise lime, fewer pills, no glows ---------- */
:root { --r: 14px; --sec: clamp(88px, 11vw, 150px); --hair: rgba(244, 244, 247, .1); --off: #ecebe6; }
body { background: #0a0a0c; }
.btn { border-radius: 10px; }
.btn-lime { box-shadow: none; }
.btn-lime:hover { box-shadow: none; transform: translateY(-1px); background: #d2ff63; }
.glow, .marquee { display: none !important; }
.chip { border-radius: 8px; }
.chip[aria-pressed="true"] { background: var(--off); }
.reveal:not(.sec-head) { opacity: 1 !important; transform: none !important; transition: none !important; }   /* motion only on headings */
.sec-head h2 { letter-spacing: -.035em; }
.eyebrow { letter-spacing: .2em; }

/* ---------- header ---------- */
.site-nav a:not(.btn) { color: rgba(244, 244, 247, .72); }
.site-nav a:not(.btn):hover { color: var(--text); }

/* ---------- hero: full-bleed live stage, headline on the dark left ---------- */
.sx-hero { position: relative; min-height: min(100svh, 920px); display: flex; align-items: center; overflow: hidden; background: #0e0e11;
  padding: calc(var(--header-h, 84px) + clamp(24px, 4vw, 48px)) 0 clamp(110px, 12vh, 140px); }
.sx-stage { position: absolute; inset: 0; background: #0e0e11 url('img/hero-poster.webp') right center / cover no-repeat; }
.sx-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity .8s ease; cursor: grab; touch-action: pan-y; outline: none; }
.sx-stage.live canvas { opacity: 1; }
.sx-stage.live { background-image: none; }
.sx-stage canvas.grabbing { cursor: grabbing; }
.sx-stage canvas:focus-visible { box-shadow: inset 0 0 0 2px var(--lime); }
.sx-stage::after { content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(14,14,17,.85) 0%, rgba(14,14,17,0) 14%, rgba(14,14,17,0) 78%, #0e0e11 100%); }
.sx-shade { position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, #0b0b0d 0%, rgba(11,11,13,.94) 24%, rgba(11,11,13,.6) 40%, rgba(11,11,13,0) 56%); }
.sx-grid { position: relative; z-index: 2; width: 100%; pointer-events: none; }
.sx-copy { pointer-events: auto; max-width: 540px; }
.sx-copy h1 { font-size: clamp(40px, 5vw, 76px); font-weight: 800; letter-spacing: -.04em; line-height: .98; margin-top: 22px; }
.sx-copy h1 span { display: block; white-space: nowrap; }
.sx-copy h1 .hl { color: var(--lime); }
.sx-lede { margin-top: 26px; font-size: clamp(16px, 1.25vw, 18px); line-height: 1.65; color: rgba(236, 235, 230, .74); max-width: 44ch; }
.sx-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.sx-ctas .btn { padding: 16px 26px; }
.sx-ctas .btn-ghost { background: rgba(11, 11, 13, .4); box-shadow: inset 0 0 0 1px rgba(236, 235, 230, .28); }
.sx-ctas .btn-ghost:hover { box-shadow: inset 0 0 0 1px rgba(236, 235, 230, .6); }
.sx-meta { margin-top: 40px; display: flex; gap: 28px; color: rgba(236, 235, 230, .5); font-size: 13px; letter-spacing: .02em; }
.sx-meta b { display: block; color: var(--off); font: 700 15px/1.2 var(--ffd); margin-bottom: 4px; }

.sx-dock { position: absolute; left: 0; right: 0; bottom: 26px; z-index: 3; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; pointer-events: none; }
.sx-dock > * { pointer-events: auto; }
.sx-hint { margin: 0; font-size: 12px; color: rgba(236, 235, 230, .42); letter-spacing: .04em; pointer-events: none !important; }
.sx-controls { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 10px; }
.sx-moods { display: inline-flex; padding: 3px; border-radius: 10px; box-shadow: inset 0 0 0 1px var(--hair); background: rgba(11, 11, 13, .55); backdrop-filter: blur(8px); }
.sx-moods button { font: 600 13px/1 var(--ffb); color: rgba(236, 235, 230, .62); background: none; border: 0; padding: 10px 14px; border-radius: 8px; cursor: pointer; transition: color .2s, background .2s; white-space: nowrap; }
.sx-moods button:hover { color: var(--off); }
.sx-moods button[aria-pressed="true"] { background: var(--off); color: #0a0a0c; }
.sx-tools { display: inline-flex; gap: 4px; padding: 3px; border-radius: 10px; background: rgba(11, 11, 13, .55); backdrop-filter: blur(8px); box-shadow: inset 0 0 0 1px var(--hair); }
.sx-tool { display: inline-flex; align-items: center; gap: 8px; font: 600 13px/1 var(--ffb); color: rgba(236, 235, 230, .72); background: none; border: 0; padding: 10px 12px; border-radius: 8px; cursor: pointer; }
.sx-tool:hover { color: var(--off); background: rgba(255, 255, 255, .05); }
.sx-tool svg { width: 15px; height: 15px; flex: none; }
.sx-tool[aria-pressed="true"] { color: var(--lime); }
.sx-tool .eqm { display: inline-flex; gap: 2px; align-items: flex-end; height: 12px; }
.sx-tool .eqm i { width: 2px; height: 4px; background: currentColor; border-radius: 1px; }
.sx-tool[aria-pressed="true"] .eqm i { animation: eqm .9s ease-in-out infinite; }
.sx-tool[aria-pressed="true"] .eqm i:nth-child(2) { animation-delay: -.3s; } .sx-tool[aria-pressed="true"] .eqm i:nth-child(3) { animation-delay: -.6s; }
@keyframes eqm { 50% { height: 12px; } }

@media (max-width: 900px) {
  /* phones: headline + quote first, then a compact stage, then the controls */
  .sx-hero { flex-direction: column; align-items: stretch; min-height: 0; padding: calc(var(--header-h, 72px) + 28px) 0 26px; }
  .sx-grid { order: 1; }
  .sx-copy h1 { font-size: clamp(42px, 12vw, 64px); }
  .sx-meta { gap: 20px; margin-top: 30px; }
  .sx-stage { position: relative; order: 2; height: min(92vw, 500px); margin-top: 22px; background-position: 66% center; }
  .sx-shade { display: none; }
  .sx-dock { position: static; order: 3; align-items: center; margin-top: 10px; }
  .sx-controls { justify-content: center; }
  .sx-moods { width: 100%; justify-content: space-between; }
  .sx-moods button { flex: 1; padding: 10px 4px; font-size: 12.5px; }
}
@media (max-width: 400px) { .sx-moods button { font-size: 11.5px; letter-spacing: -.01em; } }
@media (max-width: 360px) { .sx-copy h1 span { white-space: normal; } }

/* ---------- services: editorial rows instead of four look-alike cards ---------- */
.svc-grid { grid-template-columns: 1fr; gap: 0; border-top: 1px solid var(--hair); }
.svc { display: grid; grid-template-columns: minmax(0, 1fr) clamp(180px, 26vw, 360px); align-items: center; gap: clamp(20px, 4vw, 60px);
  min-height: 0; background: none; box-shadow: none; border-radius: 0; border-bottom: 1px solid var(--hair); padding: clamp(22px, 3vw, 34px) 0; overflow: visible; }
.svc::before { display: none; }
.svc img { position: static; order: 2; z-index: 0; opacity: 1; width: 100%; height: clamp(120px, 14vw, 190px); object-fit: cover; border-radius: 6px; filter: grayscale(.35) contrast(1.05); transform: none; transition: filter .5s; }
.svc:hover img { transform: none; opacity: 1; filter: none; }
.svc-body { padding: 0; display: grid; grid-template-columns: 70px 1fr; column-gap: 10px; align-items: baseline; }
.svc-n { grid-row: span 2; color: rgba(236, 235, 230, .4); }
.svc h3 { margin: 0 0 8px; font-size: clamp(22px, 2.6vw, 34px); letter-spacing: -.02em; }
.svc p { grid-column: 2; color: rgba(236, 235, 230, .62); max-width: 52ch; }
@media (max-width: 640px) { .svc { grid-template-columns: 1fr; } .svc img { order: 0; height: 180px; } .svc-body { grid-template-columns: 44px 1fr; } }

/* ---------- packages / estimator: flatter, quieter ---------- */
.pkg-tabs { border-radius: 12px; }
.pkg-tabs [role="tab"] { border-radius: 9px; }
.pkg-tabs [role="tab"][aria-selected="true"] { background: var(--off); box-shadow: none; }
.est-card { border-radius: 16px; background: #121215; box-shadow: inset 0 0 0 1px var(--hair); }

/* ---------- gear: clean product renders on studio grey ---------- */
.gcard { border-radius: 12px; background: #111114; }
.gcard:hover { box-shadow: inset 0 0 0 1px rgba(236, 235, 230, .22); }
.gcard-media { background: #141418; }
.gcard-media img[src^="img/"] { object-fit: contain; padding: 10px; background: radial-gradient(70% 70% at 50% 45%, #1b1c21, #111114); }
.gcard:hover .gcard-media img[src^="img/"] { transform: scale(1.03); }

/* ---------- how it works: no glow ---------- */
.step.lit .step-dot { box-shadow: none; }

/* ---------- gallery: fewer, larger event images ---------- */
.g-grid { grid-template-columns: repeat(3, 1fr); grid-auto-rows: clamp(220px, 24vw, 340px); gap: 10px; }
.g-item { border-radius: 6px; }
.g-item::after { opacity: .55; }
@media (max-width: 900px) { .g-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 220px; } }
@media (max-width: 560px) { .g-grid { grid-template-columns: 1fr; grid-auto-rows: 260px; } .g-tall { grid-row: span 1; } .g-wide { grid-column: span 1; } }

/* ---------- reviews / faq / contact ---------- */
.faq-item { border-radius: 0; background: none; box-shadow: none; border-bottom: 1px solid var(--hair); }
.c-form { border-radius: 16px; }

/* production: client's own photos */
.gcard-media img[src*='img/real/'] { object-fit: cover; padding: 0; background: none; filter: none; }

/* production: clients */
.clients { border-top: 1px solid var(--hair); }
.cl-label { font: 600 12px/1 var(--ffb); letter-spacing: .2em; text-transform: uppercase; color: var(--lime); margin: clamp(40px, 5vw, 64px) 0 18px; }
.cl-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr);
  border-top: 1px solid var(--hair); border-left: 1px solid var(--hair); }
.cl-grid li { display: flex; align-items: center; justify-content: center; text-align: center; min-height: clamp(92px, 9vw, 124px); padding: 18px 14px;
  border-right: 1px solid var(--hair); border-bottom: 1px solid var(--hair); transition: background .35s; }
.cl-grid span { font: 700 clamp(15px, 1.45vw, 20px)/1.2 var(--ffd); letter-spacing: -.01em; color: rgba(236, 235, 230, .62); transition: color .35s; }
.cl-grid li:hover { background: rgba(255, 255, 255, .025); }
.cl-grid li:hover span { color: var(--off); }
.cl-private { margin-top: clamp(16px, 2vw, 24px); }
.cl-names { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 0; }
.cl-names li { font: 700 clamp(22px, 2.7vw, 38px)/1.25 var(--ffd); letter-spacing: -.025em; color: var(--off); }
.cl-names li small { font: 500 .45em/1 var(--ffb); letter-spacing: .02em; color: var(--muted); vertical-align: middle; }
.cl-names li:not(:last-child)::after { content: ''; display: inline-block; width: .22em; height: .22em; border-radius: 50%; background: var(--lime);
  margin: 0 .55em; vertical-align: .2em; }
@media (max-width: 900px) { .cl-grid { grid-template-columns: repeat(2, 1fr); } }

/* production: rates on request (no placeholder prices) */
.tray-total, .tray-per, .tray-line, .tray-math, .t-price, .est-lbl em, .est-total-wrap { display: none !important; }
.gcard-price span { color: var(--muted); font-size: 14px; }