/* Media leads; the project caption stays below the first screen. */
.case-media-hero { position: relative; isolation: isolate; width: 100%; height: calc(100svh - var(--header)); min-height: 280px; margin: 0; background: #050606; }
.case-film { display: block; width: 100%; height: 100%; object-fit: contain; background: #000; }
.case-cover img { width: 100%; height: 100%; object-fit: cover; }
.case-cover.is-artwork { background: #e8ece8; padding: clamp(30px, 8vw, 130px); }
.case-cover.is-artwork img { object-fit: contain; }
.case-brand-cover { display: grid; place-items: center; padding: var(--edge); background: radial-gradient(ellipse at 60% 40%, #243b30, #050a08 75%); }
.case-brand-cover span { font-size: clamp(28px, 6vw, 84px); max-width: 1000px; text-align: center; letter-spacing: -.05em; line-height: 1.2; }
.case-caption { display: grid; grid-template-columns: 1fr 1.1fr; align-items: start; gap: clamp(24px, 7vw, 100px); padding: 54px var(--edge) 60px; }
.case-back { display: inline-block; color: var(--muted); font-size: 11px; margin-bottom: 22px; }
.case-back:hover { color: var(--orange); }
.case-caption h1 { font: 500 clamp(23px, 2.5vw, 36px)/1.25 var(--body); letter-spacing: -.04em; margin: 0 0 8px; }
.case-client { font-size: 12px; color: var(--orange); }
.case-caption-copy { padding-top: 40px; }
.case-caption-copy > p { font-size: 14px; line-height: 1.8; color: #b1bebe; margin: 0 0 17px; max-width: 650px; }
.case-meta { display: flex; flex-wrap: wrap; gap: 5px 18px; font-size: 10px; line-height: 1.8; color: #829292; }
.case-gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding: 0 12px; }
.case-gallery figure { margin: 0; min-width: 0; aspect-ratio: 4 / 3; overflow: hidden; background: #101212; }
.case-gallery figure:nth-child(5n+1) { grid-column: 1 / -1; aspect-ratio: 16 / 8.5; }
.case-gallery figure:last-child:nth-child(5n+2), .case-gallery figure:last-child:nth-child(5n+4) { grid-column: 1 / -1; aspect-ratio: 16 / 9; }
.case-gallery img { display: block; width: 100%; height: 100%; object-fit: cover; }
.case-gallery figure.is-artwork { background: #eeeee8; padding: clamp(16px, 3vw, 48px); }
.case-gallery figure.is-artwork img { object-fit: contain; }
.case-facts { display: flex; flex-wrap: wrap; gap: 20px 40px; padding: 28px var(--edge); color: #b6c4c4; font-size: 13px; }
.case-resource { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 28px; padding: 35px var(--edge) 55px; }
.case-resource a { font-size: 12px; color: #c2cece; border-bottom: 1px solid #536060; padding-bottom: 7px; }
.case-resource a:hover { color: var(--orange); }
.case-section-label { display: block; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: #d7e1db; }
.case-media-error { color: #ffad72; font-size: 12px; }
.case-media-error { margin: 20px var(--edge); }
@media (max-width: 700px) {
    .case-caption { grid-template-columns: 1fr; gap: 20px; padding-block: 32px; }
    .case-caption-copy { padding-top: 0; }
    .case-back { margin-bottom: 16px; }
    .case-gallery { gap: 8px; padding-inline: 8px; }
}
@media (max-width: 480px) {
    .case-radio-scene { padding: 16px; }
    .case-radio-panel { padding: 20px; }
    .case-radio-custom h2 { margin-bottom: 14px; }
    .case-gallery figure { aspect-ratio: 1; }
    .case-gallery figure:nth-child(5n+1) { aspect-ratio: 4 / 3; }
}

/* A landscape film keeps its own proportions; portrait films keep viewport height. */
.case-film-scene { height: auto; min-height: 0; aspect-ratio: var(--film-ratio, 16 / 9); background: #000; }
.case-film-scene.is-portrait { height: calc(100svh - var(--header)); aspect-ratio: auto; }
.case-film-sound { position: fixed; z-index: 45; bottom: calc(var(--film-control-bottom, 20px) + env(safe-area-inset-bottom, 0px)); right: max(20px, env(safe-area-inset-right, 0px)); display: grid; place-items: center; width: 44px; height: 44px; padding: 11px; border: 1px solid #ffffff90; border-radius: 50%; background: #0008; color: #fff; cursor: pointer; backdrop-filter: blur(8px); }
.case-film-sound:hover { background: #f58232; border-color: #f58232; }
.case-film-sound svg { width: 21px; height: 21px; }
.case-film-sound[hidden] { display: none; }
.has-hero-film .to-top { right: max(76px, calc(env(safe-area-inset-right, 0px) + 76px)); }
.case-details { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(24px,7vw,100px); padding: 10px var(--edge) 64px; }
.case-details h2 { font: 500 13px/1.5 var(--body); color: #e0eeee; margin: 0 0 18px; }
.case-details p, .case-deliverables li { font-size: 14px; line-height: 1.85; color: #a9b8b8; margin: 0 0 14px; }
.case-deliverables ul { list-style: none; padding: 0; margin: 0; }
.case-deliverables li { padding: 10px 0; margin: 0; border-bottom: 1px solid #ffffff18; }
@media(max-width:700px) { .case-details { grid-template-columns: 1fr; padding-bottom: 38px; } .case-film-sound { right: max(12px, env(safe-area-inset-right, 0px)); width: 40px; height: 40px; } }

/* A listening space: actual project imagery, softened behind a sound-reactive halo. */
.case-radio-scene { --audio-energy: 0; position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; min-height: 610px; padding: 30px clamp(16px,5vw,72px) 38px; background: #06070c; }
.case-radio-scene.case-media-hero { height: auto; min-height: max(550px,calc(100svh - var(--header))); }
.case-radio-backdrop { position: absolute; z-index: -2; inset: -5%; width: 110%; max-width: none; height: 110%; object-fit: cover; filter: blur(22px) brightness(.38) saturate(.7); }
.case-radio-scene::after { content: ''; position: absolute; inset: 0; z-index: -1; background: radial-gradient(ellipse at 50% 35%,#06061135,#03050ac9 85%); }
.case-audio-stage { display: grid; place-items: center; width: 100%; }
.case-audio-orb { position: relative; width: clamp(240px,28vw,330px); aspect-ratio: 1; max-width: 100%; }
.case-audio-orb::before { content: ''; position: absolute; inset: 17%; border-radius: 50%; background: conic-gradient(#58ecff,#447aff,#b749ff,#ff539b,#ff8864,#58ecff); filter: blur(27px); opacity: calc(.35 + var(--audio-energy) * .65); transform: scale(calc(1 + var(--audio-energy) * .25)); }
.case-audio-orb canvas { position: relative; display: block; width: 100%; aspect-ratio: 1; filter: saturate(calc(.9 + var(--audio-energy) * 1.4)); }
.case-radio-panel { width: min(680px,100%); color: #f4f4fa; padding: 19px 22px 12px; border: 1px solid #ffffff24; border-radius: 14px; background: #070a12a8; backdrop-filter: blur(22px); }
.case-radio-panel .case-section-label { font-size: 9px; letter-spacing: .07em; text-transform: none; color: #a9abb9; margin-bottom: 9px; }
.case-radio-heading { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 13px; }
.case-radio-custom h2 { margin: 0; color: #f4f4fa; font: 400 15px/1.4 var(--body); letter-spacing: -.01em; }
.case-radio-counter { font-size: 9px; color: #8c90a1; white-space: nowrap; letter-spacing: .08em; }
.case-radio-transport { display: flex; align-items: center; gap: 22px; }
.case-radio-controls { display: flex; align-items: center; gap: 9px; flex-shrink: 0; }
.case-radio-controls button { display: grid; place-items: center; width: 30px; height: 30px; border: 0; border-radius: 50%; background: transparent; color: #b7bdcd; cursor: pointer; }
.case-radio-controls .case-radio-play { width: 42px; height: 42px; background: #f0f1fa; color: #101320; }
.case-radio-controls .case-radio-play svg { width: 19px; height: 19px; }
.case-radio-controls button:hover { color: #fff; background: #ffffff20; }
.case-radio-controls .case-radio-play:hover { color: #121427; background: #b9c5ff; }
.case-radio-progress { display: flex; flex: 1; align-items: center; gap: 10px; min-width: 0; color: #a0a6b9; font-size: 10px; font-variant-numeric: tabular-nums; }
.case-radio-progress input { flex: 1; width: 100%; min-width: 0; height: 18px; cursor: pointer; accent-color: #b7bfff; }
.case-track-menu { margin-top: 12px; }
.case-track-menu summary { display: flex; justify-content: flex-end; gap: 10px; color: #989fb4; font-size: 10px; cursor: pointer; list-style: none; }
.case-track-menu summary::-webkit-details-marker { display: none; }
.case-track-menu[open] summary { padding-bottom: 12px; }
.case-radio-playlist { display: grid; }
.case-radio-playlist button { display: flex; gap: 14px; width: 100%; padding: 12px 0; border: 0; border-top: 1px solid #ffffff18; background: transparent; color: #9fa8bd; font: 400 12px/1.4 var(--body); text-align: left; cursor: pointer; }
.case-radio-playlist button span { font-size: 9px; opacity: .6; }
.case-radio-playlist button[aria-pressed="true"], .case-radio-playlist button:hover { color: #d0d6ff; }
.case-radio-native { display: grid; gap: 16px; margin-top: 16px; }
.case-radio-native label { display: block; font-size: 12px; margin-bottom: 7px; }
.case-radio-native audio { width: 100%; height: 40px; color-scheme: dark; }
.case-radio-native[hidden], .case-radio-custom[hidden] { display: none; }
.case-radio-error { color: #ffb5b5; font-size: 12px; }
.case-gallery > figure.case-gallery-audio { grid-column: 1/-1; aspect-ratio: auto; overflow: hidden; }
.case-gallery .case-radio-backdrop { width: 110%; height: 110%; }
@media(max-width:480px) {
    .case-radio-scene { min-height: 500px; padding: 16px 16px 28px; gap: 0; }
    .case-radio-panel { padding: 17px 18px 12px; }
    .case-audio-orb { width: 240px; }
    .case-radio-transport { flex-direction: column; gap: 10px; }
    .case-radio-progress { width: 100%; }
    .case-radio-controls { justify-content: center; }
}
@media(prefers-reduced-motion:reduce) { .case-audio-orb::before { transform: none; } }