/* Voidwave portfolio refresh (2026-10-10): range grids, video players. */
.range-section{padding-block:clamp(3rem,7vw,5.5rem)}
.range-grid{display:grid;grid-template-columns:1.6fr 1fr;gap:clamp(1rem,2.4vw,1.75rem);align-items:stretch}
.range-grid.flip{grid-template-columns:1fr 1.6fr}
.range-grid.flip>.range-main{order:2}
.range-side{display:grid;gap:clamp(1rem,2.4vw,1.75rem);grid-auto-rows:1fr}
.range-piece{position:relative;margin:0;border-radius:var(--radius);overflow:hidden;border:1px solid var(--border);background:var(--surface)}
.range-piece img,.range-piece video{display:block;width:100%;height:100%;object-fit:cover}
.range-main .range-piece{height:100%;min-height:420px}
.range-side .range-piece{min-height:200px}
.range-cap{display:flex;justify-content:space-between;gap:.75rem;align-items:baseline;margin-top:.6rem;font-size:.85rem;color:var(--muted)}
.range-cap strong{color:var(--text);font-weight:600}
.range-piece .frame-label{position:absolute;left:.65rem;top:.65rem;padding:.22rem .55rem;border-radius:999px;font-family:var(--font-mono);font-size:.65rem;letter-spacing:.06em;text-transform:uppercase;color:#ffd9a8;background:color-mix(in srgb,#1a1208 78%,transparent);border:1px solid color-mix(in srgb,#ffc978 40%,transparent);z-index:2}
/* video player */
.vw-video{cursor:pointer;background:#000}
.vw-video .play{position:absolute;inset:0;display:grid;place-items:center;z-index:1;background:linear-gradient(180deg,transparent 55%,rgba(0,0,0,.45));border:0;color:#fff;cursor:pointer}
.vw-video .play span{width:64px;height:64px;border-radius:50%;display:grid;place-items:center;background:rgba(12,16,26,.7);border:1px solid #c084ff88;font-size:22px;padding-left:4px}
.vw-video.is-playing .play{display:none}
.vw-video.vertical{aspect-ratio:9/16}
.vw-video.land{aspect-ratio:16/9}
.lanes{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
.lanes a{display:block;padding:1.1rem 1.2rem;border:1px solid var(--border);border-radius:var(--radius);color:var(--text);text-decoration:none;background:var(--glass)}
.lanes a small{display:block;color:var(--muted);margin-top:.35rem;font-size:.82rem}
@media (max-width:820px){
 .range-grid,.range-grid.flip{grid-template-columns:1fr}
 .range-grid.flip>.range-main{order:0}
 .range-main .range-piece{min-height:0}
 .lanes{grid-template-columns:1fr 1fr}
}
/* PIXEL-POSITION RULE (Michael 2026-10-10): everything above #music must keep live heights.
   Live keyframe section content box = 403.515625px at >=900px (verified 1280) and 464.703125px at <900px (verified 390).
   The art band is fixed to those heights so the Suno section top matches live exactly. */
.art-band{display:grid;grid-template-columns:minmax(0,2.1fr) minmax(0,1fr);gap:clamp(1rem,2.4vw,1.75rem);height:403.515625px}
.art-band .range-piece{height:100%;min-height:0}
.art-lead{position:relative}
.art-overlay{position:absolute;left:0;right:0;bottom:0;padding:1.4rem 1.5rem 1.2rem;background:linear-gradient(180deg,transparent,rgba(7,9,15,.88) 70%);z-index:1}
.art-overlay h2{margin:.35rem 0 0}
@media (max-width:899px){
 .art-band{grid-template-columns:1fr;grid-template-rows:minmax(0,1.25fr) minmax(0,1fr);height:464.703125px;gap:12px}
 .art-overlay{padding:1rem}
 .art-overlay h2{font-size:1.35rem}
}
/* Video row: lead + vertical at equal height. Lead capped at 854px (native width of the squad combat master) so it never upscales. */
.video-row{display:grid;grid-template-columns:minmax(0,1.778fr) minmax(0,.5625fr);gap:clamp(1rem,2.4vw,1.5rem);align-items:start}
.lead-video{max-width:854px}
@media (max-width:820px){
 .video-row{grid-template-columns:1fr}
 .video-row .vertical{max-width:260px;margin-inline:auto}
}
/* ---- /work and /services mockups (rev 3, 2026-10-10 PM) ---- */
.work-hero-art{aspect-ratio:16/9;box-shadow:var(--shadow)}
.range-piece.contain img{object-fit:contain;background:#05070c}

main[data-page] .range-piece+.range-cap{margin-top:.6rem}
/* service lanes: media fills the existing 16:10 service-media box */
.lane-media .range-piece{height:100%;border:0;border-radius:0}
.lane-media .vw-video.lane-v video{object-fit:cover;object-position:50% 40%}
.lane-media .vw-video{aspect-ratio:auto;height:100%}
/* Subpage range grids (scoped to main[data-page]; home mockup unaffected).
   Main piece sets the row height (3:2). Side pieces stretch to that height; images are absolutely
   positioned so they never push the row taller. */
main[data-page] .range-main>.range-piece{aspect-ratio:3/2;height:auto;min-height:0}
@media (min-width:821px){
 main[data-page] .range-grid{align-items:stretch}
 main[data-page] .range-side{grid-auto-rows:minmax(0,1fr);height:100%}
 main[data-page] .range-side.one{grid-template-rows:minmax(0,1fr) auto;grid-auto-rows:auto}
 main[data-page] .range-side .range-piece{position:relative;height:100%;min-height:0}
 main[data-page] .range-side .range-piece img{position:absolute;inset:0;width:100%;height:100%}
}
@media (max-width:820px){
 main[data-page] .range-main>.range-piece{aspect-ratio:16/10}
 main[data-page] .range-side .range-piece{aspect-ratio:16/10;min-height:0}
 main[data-page] .range-side .range-piece.contain{aspect-ratio:2/3}
}
main[data-page] .range-grid>*,main[data-page] .range-side>*{min-width:0}
main[data-page] .range-cap{flex-wrap:wrap;gap:.25rem 1rem}
@media (max-width:820px){
 main[data-page] .video-row .vw-video.vertical{max-width:62%;margin-inline:auto}
 main[data-page] .video-row .vw-video.vertical+.range-cap{max-width:62%;margin-inline:auto}
 }
@media (max-width:820px){
 main[data-page] .range-piece{width:100%;min-height:0!important;box-sizing:border-box}
 }
@media (min-width:821px){ main[data-page] .range-side.one:not(:has(.range-cap)){grid-template-rows:minmax(0,1fr)} }
/* CLIENT-HOLD fill (2026-10-10): 16:9 lead + 3:2 character loop at equal height; text-only service lanes */
.vw-video.wide32{aspect-ratio:3/2}
.video-row:has(.wide32){grid-template-columns:minmax(0,1.778fr) minmax(0,1.5fr)}
.video-row:has(.wide32) .lead-video{max-width:none}
@media (max-width:820px){ .video-row:has(.wide32){grid-template-columns:1fr} }
.service-card.text-lane .service-body{padding-top:1.4rem}