/* Fluid 3D scene layout. Uses viewport-relative sizing instead of fixed artwork dimensions. */
.hero{--scene-size:clamp(450px,47vw,650px);--scene-x:clamp(-16px,4vw,80px);--scene-opacity:1}.instrument{width:var(--scene-size);height:var(--scene-size);right:var(--scene-x);top:50%;opacity:var(--scene-opacity);transform:translateY(-50%) rotateX(9deg)}.medallion{width:clamp(245px,25vw,330px)}.reflection{width:clamp(245px,25vw,330px);margin-left:calc(clamp(245px,25vw,330px) / -2)}.tagline-wrap{bottom:clamp(-8px,1vw,14px)}
/* Wide desktop: preserve a spacious text column while the medallion occupies the right visual field. */
@media(min-width:1200px){.hero-inner{max-width:min(58%,720px)}.instrument{right:clamp(8px,5.5vw,110px)}.hero .b1{right:6%;top:12%}.hero .b2{right:39%;bottom:12%}}
/* Laptop/tablet landscape: shrink the scene first, never the copy. */
@media(min-width:801px) and (max-width:1199px){.hero{--scene-size:clamp(410px,48vw,520px);--scene-x:clamp(-110px,-5vw,-34px);--scene-opacity:.74;min-height:640px}.hero-inner{max-width:54%;padding-block:68px}.medallion,.reflection{width:clamp(225px,27vw,285px)}.reflection{margin-left:calc(clamp(225px,27vw,285px) / -2)}.tagline-wrap{bottom:-3%;font-size:10px;letter-spacing:4px}}
/* Portrait tablet: content stays unobstructed, scene becomes a central lower panel. */
@media(min-width:601px) and (max-width:800px){.hero{min-height:800px;--scene-size:min(62vw,490px);--scene-opacity:.76;align-items:start}.hero-inner{max-width:680px;padding:54px 0 390px}.instrument{left:50%;right:auto;top:auto;bottom:-6%;transform:translateX(-50%) rotateX(9deg)}.medallion,.reflection{width:min(38vw,270px)}.reflection{margin-left:calc(min(38vw,270px) / -2)}.tagline-wrap{bottom:-10%}}
/* Phone: a vertical composition—copy first, scene second—with no shared vertical area. */
@media(max-width:600px){.hero{min-height:790px;--scene-size:min(86vw,420px);--scene-opacity:.72;align-items:start}.hero-inner{padding:34px 0 calc(min(86vw,420px) + 76px);max-width:none}.instrument{left:50%;right:auto;top:auto;bottom:2px;transform:translateX(-50%) rotateX(8deg)}.medallion,.reflection{width:min(55vw,250px)}.reflection{margin-left:calc(min(55vw,250px) / -2)}.tagline-wrap{bottom:-9%;font-size:9px;letter-spacing:3px}.hero .b1{right:5%;top:17%;width:88px;height:88px}.hero .b2{left:5%;right:auto;bottom:11%;width:58px;height:58px}.hero .b3{right:-12%;bottom:8%;width:120px;height:120px}}
@media(max-width:390px){.hero{min-height:760px;--scene-size:min(83vw,370px)}.hero-inner{padding-top:30px;padding-bottom:calc(min(83vw,370px) + 64px)}.tagline-wrap{bottom:-11%;font-size:8px;letter-spacing:2.5px}}