/* Native page scrolling, with a large portrait and controls in normal flow. */
html{scroll-snap-type:none;scroll-padding-top:20px;scroll-padding-bottom:100px}
.hero .portrait-stage{position:relative;inset:auto;left:auto;top:auto;display:flex;flex-direction:column;align-items:center;width:100%;height:auto;min-height:0;margin:0;gap:12px;pointer-events:none}
.hero .portrait-stage #scene,.hero .portrait-stage #scene3d{position:relative;inset:auto;left:auto;right:auto;bottom:auto;width:100%;height:clamp(420px,62svh,760px);min-height:0;flex:none;pointer-events:auto}
.hero .portrait-stage .portrait-viewport{overflow:hidden;touch-action:pan-y pinch-zoom}
.portrait-toolbar{position:relative;display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;max-width:100%;padding:8px;z-index:12;pointer-events:auto;background:#ffffff80;border-radius:14px}
.hero .portrait-toolbar .model-controls{position:static;inset:auto;transform:none;width:auto;display:flex;justify-content:center;gap:6px;margin:0}
.hero .portrait-toolbar .model-controls button{min-height:48px;padding:10px 18px;font-size:14px;white-space:nowrap}
.hero .portrait-toolbar .portrait-zoom{position:static;inset:auto;transform:none;display:flex;align-items:center;gap:6px;margin:0;padding:0}
.hero .portrait-toolbar .portrait-zoom button{min-width:48px;width:48px;height:48px;min-height:48px;border-radius:9px;font-size:22px}
.hero .portrait-toolbar .portrait-zoom button[data-zoom=reset]{width:auto;padding:0 14px;font-size:14px}
.hero .portrait-toolbar .portrait-zoom-status{font-size:13px;min-width:48px;background:transparent;padding:6px}
.hero .portrait-toolbar #viewreset{display:none}.hero.is-3d .portrait-toolbar #viewreset{display:block}.hero.is-3d .portrait-toolbar .portrait-zoom{display:none}
.hero .portrait-toolbar .three-tools{position:static;inset:auto;transform:none;display:flex;gap:6px;margin:0}.hero .portrait-toolbar .three-tools[hidden]{display:none!important}.hero .portrait-toolbar .three-tools button{min-width:48px;min-height:48px;font-size:14px}
.hero .portrait-stage .gesture{position:static;inset:auto;display:block;text-align:center;max-width:100%;margin:0 0 12px;font-size:12px;color:#666;pointer-events:none}
@media(min-width:1200px) and (hover:hover) and (pointer:fine){
main>.hero{height:auto;min-height:calc(100svh - 84px);max-height:none;display:grid;grid-template-columns:minmax(0,1fr) minmax(380px,32%);gap:20px 32px;padding:32px var(--page-gutter);align-items:start}
.hero .hero-intro{position:static;inset:auto;grid-column:1/-1;grid-row:1;padding:0}.hero .hero-intro h1{font-size:clamp(32px,3vw,48px);margin:8px 0}.hero .hero-intro h1 br{display:none}.hero .hero-intro p{display:none}
.hero .portrait-stage{grid-column:1;grid-row:2}.hero .consult-panel{position:relative;inset:auto;transform:none;grid-column:2;grid-row:2;width:100%;max-height:none;overflow:visible;padding:24px;margin:0}.hero .model-index{display:none}.hero .hero-bottom{position:static;grid-column:1/-1;height:auto;min-height:44px;gap:16px;margin:0}
}
@media(max-width:1199px),(hover:none) and (pointer:coarse){.hero .portrait-stage{height:auto;min-height:0}.hero .portrait-stage #scene,.hero .portrait-stage #scene3d{height:clamp(420px,56svh,680px)}}
@media(max-width:599px){.hero .portrait-stage{width:calc(100% + 32px);margin:0 -16px;gap:10px}.hero .portrait-stage #scene,.hero .portrait-stage #scene3d{height:clamp(360px,52svh,540px)}.portrait-toolbar{width:calc(100% - 32px);gap:10px;padding:10px}.hero .portrait-toolbar .model-controls{width:100%}.hero .portrait-toolbar .model-controls button{flex:1;padding:10px 14px}.hero .portrait-toolbar .portrait-zoom{justify-content:center;width:100%}.hero .portrait-stage .gesture{padding:0 16px;font-size:12px}}

/* Size the complete asset through its canvas, rather than cropping a scaled image. */
.hero .portrait-stage #scene,.hero .portrait-stage #scene3d{height:clamp(640px,88svh,1600px)}
.hero .portrait-stage .portrait-viewport{overflow:hidden;padding:12px 0;box-sizing:border-box}
.hero .portrait-stage .portrait-pan{height:100%;aspect-ratio:1122/1402;max-width:96%;flex:none}
.hero .portrait-stage .flat-portrait{height:100%;width:100%;aspect-ratio:1122/1402}
.hero .portrait-stage .portrait-art{object-fit:contain;object-position:center;mask-image:none;-webkit-mask-image:none}
@media(max-width:1199px),(hover:none) and (pointer:coarse){.hero .portrait-stage #scene,.hero .portrait-stage #scene3d{height:min(88svh,118vw);min-height:0}}
@media(max-width:599px){.hero .portrait-stage #scene,.hero .portrait-stage #scene3d{height:120vw;min-height:0;max-height:720px}.hero .portrait-stage .portrait-viewport{padding:10px 0}.hero .portrait-stage .portrait-pan{max-width:96%}}