.hero.hero--3d{min-height:100svh;background:#000;color:#fff;display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);align-items:center;padding:110px max(24px,calc((100vw - 1280px)/2)) 50px;gap:48px;overflow:hidden}
.hero--3d .hero-content{width:auto;margin:0;padding:0;display:block;z-index:1}
.hero--3d .eyebrow{color:#ffd34e}
.hero--3d .eyebrow:before{background:#ffd34e}
.hero--3d h1{font-size:clamp(4.5rem,7.6vw,8rem);line-height:.95;color:#fff;letter-spacing:-.065em}
.hero--3d h1 span{max-width:35ch;margin-top:26px;color:#c8c8c8;font-size:clamp(1rem,1.4vw,1.2rem);line-height:1.6;letter-spacing:-.02em}
.hero--3d .hero-meta{max-width:290px;margin-top:40px;border-color:#444;color:#fff}
.hero--3d .hero-meta strong{color:#ffd34e}
.packaging-viewer{min-width:0;position:relative}
.viewer-stage{height:clamp(370px,60svh,640px);position:relative;background:#f1f1f4;outline:none;touch-action:pan-y;border-radius:28px;overflow:hidden}
.viewer-stage canvas{display:block;width:100%;height:100%;outline:none;touch-action:pan-y!important}
.viewer-stage canvas:focus-visible{outline:3px solid #a67b00;outline-offset:-5px;border-radius:28px}
.viewer-fallback{width:100%;height:100%;object-fit:cover;border-radius:28px}
.viewer-ready .viewer-fallback{opacity:0;visibility:hidden}
.hero--3d .viewer-caption{display:flex;justify-content:center;padding:0;border:0;font-size:11px;font-weight:400;letter-spacing:.025em;color:#aaa;min-height:2.8em;line-height:1.4;margin:16px 0}
.hero--3d .viewer-caption span:last-child{text-align:center;letter-spacing:.025em;font-weight:400}
.viewer-controls{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:8px}
.viewer-controls[hidden]{display:none}
.viewer-controls button{font:600 11px Inter,Arial,sans-serif;cursor:pointer;border:1px solid #555;color:#fff;background:#000;border-radius:100px;padding:11px 15px;transition:background .2s,border-color .2s}
.viewer-controls button:hover{border-color:#ffd34e}
.viewer-controls button:focus-visible{outline:2px solid #ffd34e;outline-offset:3px}
.hero--3d .viewer-stage{--model-loading-bg:#f1f1f4;--model-loading-color:#202127}
@media(max-width:750px){.hero.hero--3d{min-height:auto;grid-template-columns:1fr;padding:95px 20px 34px;gap:30px}.hero--3d h1{font-size:clamp(4.5rem,20vw,7rem)}.hero--3d h1 span{max-width:36ch;margin-top:20px;font-size:1rem}.hero--3d .hero-meta{display:none}.viewer-stage{height:clamp(340px,53svh,490px)}.viewer-controls button{padding:10px 13px}}