/* Steel-blue Visual identity and the retained studio details. */
:root{--visual:var(--bang-visual);--visual-ink:var(--bang-visual-ink);--visual-wash:var(--bang-visual-wash);--visual-dark:var(--bang-visual-dark)}
.brand{flex-shrink:0}
.brand-label{display:block;border-left:1px solid #aeb1a6;padding-left:14px;font:600 10px/1.5 Manrope,Arial,sans-serif;letter-spacing:.06em;color:var(--ink)}
#mast .mast-inner{gap:22px}
#mast .desktop-nav{gap:28px;margin-left:auto}
#mast .nav-cta{gap:18px;flex-shrink:0;padding:12px 14px;font-size:11px;white-space:nowrap;background:var(--audio,#e9ff48);color:var(--ink)}
#mast .nav-cta:hover{background:var(--bang-audio-hover)}
#mast .menu-toggle{flex-shrink:0;margin-left:0}
.studio-emphasis,.studio-pair-head em{font-family:Georgia,'Times New Roman',serif;font-style:italic;font-weight:400;letter-spacing:-.055em}
.hybrid-title{animation:none}
.home-hybrid .hybrid-hero{--hero-exit:inherit}
.home-hybrid .studio-hero-sequence{--hero-exit:0;--hero-hold:0px;background:var(--paper)}
.home-hybrid .studio-hero-sequence>.hero{position:relative;top:auto}
.studio-reel{display:flex;align-items:center;gap:13px;min-height:56px;width:100%;padding:7px;border:1px solid #dce5e94a;background:#1118209e;color:var(--paper);text-align:left}
.studio-reel img{width:70px;height:40px;object-fit:cover;flex-shrink:0}
.studio-reel .micro{font-size:10px;color:#c3d3df;letter-spacing:.09em}
.studio-reel strong{display:flex;align-items:center;gap:17px;font-size:11px;font-weight:650;margin-top:4px}
.studio-reel:hover{border-color:var(--visual);background:#182731}
/* Original single-frame Sound → Vision wipe; controls stay outside its fading layers. */
.studio-crossover{background:var(--ink);color:var(--paper)}
.studio-crossover>.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
.studio-crossover .crossover{scroll-margin-top:var(--nav)}
.crossover-controls{display:grid;grid-template-columns:1fr 1fr;gap:28px;padding-block:20px 26px}
.crossover-controls .micro{display:block;font-size:10px;letter-spacing:.045em;color:#b6c2bc;margin-bottom:9px}
.crossover-controls button{display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;min-height:48px;padding:13px 16px;background:var(--audio);color:var(--ink);text-align:left}
.crossover-controls strong{font-size:14px;line-height:1.35;font-weight:650}
.crossover-controls b{font-size:23px;line-height:1;flex-shrink:0}
.crossover-controls button:hover{filter:brightness(1.08)}
.crossover-controls .crossover-visual-control button{background:var(--visual)}
.crossover-controls .crossover-visual-control .micro{color:#bbcfdd}
.studio-crossover .edit-ruler i{background:linear-gradient(90deg,var(--audio),var(--visual))}
.studio-crossover .cut-visual .cut-meta span{background:var(--visual-dark)}

/* Native-scroll media entrances. Text is never staggered, faded or painted in. */
.media-entry-frame{display:block;min-width:0}
@media(prefers-reduced-motion:no-preference){
 .js-motion .home-hybrid .studio-hero-sequence>.hero{transform:scale(calc(1 - .08 * var(--hero-exit)));transform-origin:center 35%;border-radius:calc(16px * var(--hero-exit))}
 .js-motion .home-hybrid .studio-hero-sequence.hero-can-pin{--hero-hold:clamp(65px,11svh,100px)}
 .js-motion .home-hybrid .studio-hero-sequence.hero-can-pin>.hero{position:sticky;top:var(--nav)}
 .js-motion .media-entry-surface{clip-path:polygon(0 calc((1 - var(--aperture,1)) * 16%),100% 0,100% calc(100% - (1 - var(--aperture,1)) * 16%),0 100%);transform:scale(calc(.92 + .08 * var(--aperture,1)));transform-origin:center 65%}
 .js-motion .media-entry-frame:focus-within>.media-entry-surface,.js-motion .dp-tile:focus-visible .media-entry-surface{clip-path:none;transform:none}
}
.motion-off .home-hybrid .studio-hero-sequence>.hero{transform:none;border-radius:0;position:relative}
.motion-off .media-entry-surface{clip-path:none;transform:none}
@media(prefers-reduced-motion:reduce){.media-entry-surface{clip-path:none;transform:none}.studio-hero-sequence>.hero{transform:none!important;border-radius:0!important;position:relative!important}}
.home-hybrid .process::before,.home-hybrid .contact .section-index::after{display:none}
.home-hybrid .contact-title{transform:none!important}
.studio-journal-head .micro,.studio-journal-all span{color:var(--visual-ink)}
.studio-journal-all,.studio-story-read{border-color:#9db5c7}
.studio-story-mark{color:var(--visual)}
.studio-story-arrow{background:var(--visual)}
.studio-story-art{background:var(--visual-dark)}
.hybrid-visual-art::after{background:radial-gradient(ellipse at 62% 48%,#86a4b91c,transparent 70%)}
.home-hybrid .visual-service .service-copy h3{color:var(--ink)}
@media(max-width:1100px){#mast .desktop-nav{gap:18px;font-size:10px}#mast .mast-inner{gap:16px}.brand-label{font-size:10px;padding-left:11px}.home-hybrid .brand img,.content-page .brand img{width:88px}}
@media(max-width:900px){#mast .desktop-nav{display:none}#mast .nav-cta{margin-left:auto}}
@media(max-width:700px){
 :root{--nav:64px}
 .home-hybrid #mast,.content-page #mast,#mast{height:64px}
 #mast .mast-inner{gap:12px}
 .home-hybrid .brand img,.content-page .brand img,.brand img{width:74px}
 .brand{gap:10px}
 .brand-label{font-size:10px;line-height:1.45;letter-spacing:.035em;padding-left:10px}
 #mast .nav-cta{min-height:40px;font-size:10px;padding:8px 10px;gap:10px}
 .home-hybrid .hybrid-hero,.hybrid-hero-inner{min-height:calc(100svh - 64px)}
 .studio-reel{min-height:51px}
 .studio-reel img{width:64px;height:36px}
 .studio-reel strong{font-size:11px}
 .crossover-controls{gap:14px;padding-block:16px 20px}
 .crossover-controls button{padding:12px 10px;gap:8px;min-height:65px;align-items:flex-start}
 .crossover-controls strong{font-size:12px}
 .crossover-controls b{font-size:19px}
 .crossover-controls .micro{font-size:10px;line-height:1.5}
 .studio-crossover .cut-panel{min-height:320px}
 :root:not(.js-motion) .studio-crossover .record-set{width:44%;left:40%;top:31%}

}
@media(max-width:430px){
 #mast .mast-inner{gap:10px}
 .home-hybrid .brand img,.content-page .brand img,.brand img{width:70px}
 .brand{gap:8px}
 .brand-label{font-size:10px;padding-left:8px}
 #mast .nav-cta{font-size:10px;padding-inline:8px;gap:8px}
}
@media(max-width:370px){
 #mast .mast-inner{padding-inline:16px;gap:9px}
 .home-hybrid .brand img,.content-page .brand img,.brand img{width:64px}
 .brand{gap:8px}
 .brand-label{font-size:10px;padding-left:8px}
 #mast .nav-cta{font-size:10px;padding:7px 8px;gap:0;white-space:normal;max-width:74px;text-align:center;line-height:1.3}
 #mast .nav-cta b{display:none}
 #mast .menu-toggle{width:24px}
}
/* Design system type floor: at phone widths the 10px studio label stacks one word per line so the header still fits */
@media(max-width:430px){.brand-label{width:min-content;letter-spacing:.02em;line-height:1.3}}
.motion-control .motion-text{white-space:nowrap}