/* The selected front-facing hero, 27 October 2026. */
.hero .hero-stack .hero-actions { display:flex;justify-content:center;align-items:center;margin-top:32px; }
.hero .hero-stack .hero-actions > .btn { margin-inline:auto; }

/* Six selected BG shots; keep the foreground instrument and copy dominant. */
.hero:has(.hero-stack) .hero-film { background:#070809; }
.hero:has(.hero-stack) .hero-film video { display:block;object-position:center;filter:saturate(.65) brightness(.42);transform:scale(1.02); }
.hero:has(.hero-stack) .film-grain { display:none; }
.hero:has(.hero-stack) .film-shade { background:linear-gradient(180deg,rgba(6,7,9,.55),rgba(6,7,9,.18) 30%,rgba(6,7,9,.3) 64%,var(--ink) 100%); }
@media (max-width:860px) {
 .hero:has(.hero-stack) .hero-film video { filter:saturate(.65) brightness(.32); }
}
@media (prefers-reduced-motion:reduce) {
 .hero:has(.hero-stack) .hero-film video { filter:saturate(.65) brightness(.32); }
}

/* Playback progress stays on the waveform rather than tinting the whole player. */
.sound-preview:hover,.sound-preview[aria-pressed="true"] { background:transparent; }
.sound-toggle { display:block;width:100%;padding:0;color:inherit;text-align:left; }
.sound-toggle .sound-preview-top { min-height:44px; }
.sound-toggle[aria-pressed="true"] .sound-stop-path { display:block; }
.sound-toggle[aria-pressed="true"] .sound-play-path { display:none; }
.sound-toggle:hover .sound-play { border-color:var(--amber); }
.sound-duration { display:block;font-variant-numeric:tabular-nums;white-space:nowrap; }
.sound-timeline { position:relative;height:44px;margin-top:12px;--progress:inherit; }
.sound-timeline .sound-wave { position:absolute;inset:0;width:100%;height:100%;margin:0;fill:#8d7e6b;pointer-events:none; }
.sound-timeline .sound-wave-played { fill:var(--amber);clip-path:inset(0 calc(100% - var(--progress,0%)) 0 0); }
.sound-playhead { position:absolute;top:0;bottom:0;left:clamp(1px,var(--progress,0%),calc(100% - 1px));width:2px;background:var(--paper);transform:translateX(-50%);pointer-events:none;opacity:0; }
.sound-preview[data-active="true"] .sound-playhead { opacity:1; }
.sound-seek { position:absolute;inset:0;margin:0;width:100%;height:100%;opacity:0;cursor:ew-resize; }
.sound-timeline:has(.sound-seek:focus-visible) { outline:2px solid var(--amber);outline-offset:4px; }
@media(max-width:860px) and (min-width:601px) {
 .sound-preview-top { flex-wrap:wrap; }
 .sound-duration { flex-basis:100%;margin-left:46px; }
}
@media(max-width:600px) { .sound-timeline { margin-top:6px; } }

/* Reference title: dense expanded white type with real distressed film texture. */
.hero h1.hero-title {
 font-weight:1000;letter-spacing:-.025em;color:#f4f4f2;-webkit-text-fill-color:currentColor;
 background:none;filter:none;text-shadow:none;animation:none;
}
.hero h1.hero-title .w {
 color:transparent;-webkit-text-fill-color:transparent;
 background-color:#fff;background-image:url('../media/tex-grain.webp');
 background-size:1000px 667px;background-blend-mode:normal;
 -webkit-background-clip:text;background-clip:text;
 filter:invert(1) contrast(1.25);text-shadow:none;animation:none;opacity:1;transform:none;
}

/* Keep the sculpted metal pill; carry the title grain into its face and lettering. */
.hero .hero-actions .btn-primary {
 position:relative;isolation:isolate;overflow:hidden;
 font-family:var(--display);font-stretch:120%;font-weight:900;
 font-size:clamp(12px,1.2vw,16px);letter-spacing:-.015em;text-transform:uppercase;
 border-radius:999px;height:52px;padding:0 28px;
}
.hero .hero-cta-grain {
 position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:-1;
 background:url('../media/tex-grain.webp') center/1000px 667px repeat;
 mix-blend-mode:screen;opacity:.58;filter:contrast(1.65) brightness(1.3);
}
.hero .hero-cta-label {
 color:transparent;-webkit-text-fill-color:transparent;
 background:#fff url('../media/tex-grain.webp') center/1000px 667px;
 -webkit-background-clip:text;background-clip:text;
 filter:invert(1) contrast(1.7);text-shadow:none;
}
.hero .hero-actions .btn-primary:focus-visible { outline:2px solid #f4f4f2;outline-offset:5px; }
@media(prefers-reduced-motion:reduce) { .hero .hero-actions .btn-primary { transition:none; } }

/* Matte from the new render; the camera and hero layout stay fixed. */
.hero-ui.live-instrument { -webkit-mask-image:url('../media/hero-refresh/hero-v2-mask.webp');mask-image:url('../media/hero-refresh/hero-v2-mask.webp'); }