/* Full-image presentation and optional scroll choreography. */
.portrait-frame{width:100%;max-width:300px;border-radius:10px;padding:12px}
.portrait-art{width:100%;height:auto;aspect-ratio:3 / 4;border-radius:3px}
.portrait-art>img{width:100%;height:100%;object-fit:contain;position:absolute;inset:0}
.portrait-note{gap:8px;flex-wrap:wrap}
.portrait-note small{font-size:9px;letter-spacing:.5px}
.hardware-cover{height:auto;min-height:570px;display:grid;grid-template-columns:.9fr 1fr;gap:35px;align-items:center;padding:55px 65px;background:#efe3d3;border-radius:16px}
.hardware-cover>img{position:relative;inset:auto;grid-column:2;grid-row:1;width:100%;height:460px;object-fit:contain;object-position:center;z-index:0;border-radius:0;filter:drop-shadow(0 16px 15px #4b3c2825)}
.hardware-cover:after{display:none}
.hardware-cover-copy{position:relative;inset:auto;grid-column:1;grid-row:1;z-index:1}
.hardware-cover-copy>strong{font-size:clamp(32px,3.6vw,50px);line-height:1.5;margin:20px 0}
.work-cover.hardware-cover:hover>img{transform:none}
.hardware-cover .image-tag{top:19px;left:23px}
.product-story{position:relative;height:auto;margin-top:5px}
.product-sticky{display:grid;grid-template-columns:1.1fr 1fr;align-items:center;column-gap:60px;row-gap:18px;padding:10px 0 30px}
.product-story .future-copy{max-width:590px}
.product-story .future-copy h2{font-size:clamp(30px,3.3vw,48px);line-height:1.5}
.device-stage{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;isolation:isolate;padding:22px;min-width:0}
.device-stage>img{width:100%;height:min(510px,58svh);object-fit:contain;position:relative;border-radius:0;z-index:1;filter:drop-shadow(0 18px 18px #4b3c282b)}
.device-stage figcaption{display:flex;flex-direction:column;align-items:center;gap:7px;margin-top:18px;z-index:2}
.device-stage figcaption strong{font-family:var(--serif);font-size:22px;font-weight:400;letter-spacing:2px}
.device-stage figcaption span{font-size:10px;color:#968771;letter-spacing:1px}
.device-halo{position:absolute;inset:10% -6% 8%;border-radius:50%;background:radial-gradient(ellipse,#c0b58a32,transparent 65%);z-index:0}
.story-milestones{grid-column:1/-1;display:flex;justify-content:center;gap:50px;padding-top:10px;color:#a39a89;font-size:11px;letter-spacing:2px}
.story-milestones>span{display:flex;align-items:center;gap:9px;transition:color .5s}
.story-milestones i{width:5px;height:5px;border-radius:50%;background:#c0b8a5;transition:background .5s,box-shadow .5s}
.story-milestones .active{color:#58705b}.story-milestones .active i{background:#789277;box-shadow:0 0 0 5px #78927716}
.site-header{transition:background .4s,box-shadow .4s}
.site-header.scrolled{background:#f6f1e8e8;box-shadow:0 3px 22px #202b2310}
.site-header:after{content:"";position:absolute;bottom:0;left:0;width:100%;height:2px;background:linear-gradient(90deg,#a48750,#6c8a70);transform-origin:left;transform:scaleX(var(--reading,0))}
html[data-motion="on"] .hero-image{transform:translate3d(0,var(--hero-shift,0px),0) scale(1.06);will-change:transform}
html[data-motion="on"] .hero-content{transform:translate3d(0,var(--copy-shift,0px),0);opacity:var(--hero-opacity,1)}
html[data-motion="on"] .hero-content>*{animation:hero-arrive 1.25s cubic-bezier(.19,1,.22,1) both}
html[data-motion="on"] .hero-content h1{animation-delay:.1s}
html[data-motion="on"] .hero-content .hero-description{animation-delay:.22s}
html[data-motion="on"] .hero-content .button{animation-delay:.34s}
.reveal-item{transition:opacity .9s cubic-bezier(.2,.7,.25,1),translate .9s cubic-bezier(.2,.7,.25,1),filter .9s;transition-delay:var(--reveal-delay,0ms)}
html[data-motion="on"] .reveal-pending{opacity:0;translate:0 28px;filter:blur(4px)}
html[data-motion="on"] .reveal-pending:focus-within{opacity:1;translate:0;filter:none}
html[data-motion="on"] .device-stage>img{transform:translate3d(0,var(--device-shift,12px),0) scale(var(--device-scale,.93));will-change:transform}
html[data-motion="on"] .device-halo{opacity:var(--device-light,.4);transform:scale(var(--device-scale,.93))}
html[data-motion="on"] .work-cover{transition:transform .65s cubic-bezier(.16,1,.3,1),box-shadow .65s,border-color .4s}
html[data-motion="on"] .work-cover:hover{transform:translateY(-5px);box-shadow:0 20px 42px #06151035}
html[data-motion="on"] dialog[open]{animation:dialog-arrive .4s cubic-bezier(.16,1,.3,1)}
html[data-motion="on"] dialog[open]::backdrop{animation:backdrop-arrive .3s}
@keyframes hero-arrive{from{opacity:0;translate:0 26px;filter:blur(6px)}to{opacity:1;translate:0;filter:blur(0)}}
@keyframes dialog-arrive{from{opacity:0;transform:translateY(20px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes backdrop-arrive{from{opacity:0}to{opacity:1}}
@media(min-width:900px) and (min-height:700px){html[data-motion="on"] .product-story{height:155svh;min-height:1050px}html[data-motion="on"] .product-sticky{position:sticky;top:105px;min-height:calc(100svh - 125px);max-height:850px}.product-sticky .device-stage>img{height:min(480px,54svh)}}
@media(max-width:1100px){nav{gap:18px}.product-sticky{column-gap:30px}.hardware-cover{padding:50px 35px;min-height:520px}.hardware-cover>img{height:420px}.hardware-cover-copy>strong{font-size:36px}.portrait-frame{max-width:270px}}
@media(max-width:760px){.portrait-frame{width:240px;max-width:80%;padding:10px}.portrait-art{height:auto;aspect-ratio:3 / 4}.portrait-note{padding-top:10px}.hardware-cover{display:flex;flex-direction:column;align-items:stretch;gap:20px;padding:58px 20px 38px;min-height:0;height:auto;border-radius:12px}.hardware-cover-copy{position:static;order:0;text-align:center}.hardware-cover-copy>strong{font-size:32px;line-height:1.45;margin:13px 0}.hardware-cover-copy>small{font-size:11px}.hardware-cover-copy>span{font-size:9px;letter-spacing:2px}.hardware-cover>img{position:static;order:1;width:100%;height:auto;max-height:none;aspect-ratio:1087 / 1447;object-fit:contain;border-radius:0;flex:none}.hardware-cover .image-tag{top:17px;left:17px;font-size:8px}.hardware-cover .round-arrow{right:14px;bottom:14px}.product-story{height:auto;min-height:0}.product-sticky{position:static;grid-template-columns:1fr;row-gap:24px;padding-bottom:0}.device-stage{width:min(100%,420px);margin:auto;padding:12px 16px}.device-stage>img{height:auto;max-height:none;aspect-ratio:1087 / 1447;object-fit:contain}.device-halo{inset:10% 0}.device-stage figcaption strong{font-size:20px}.story-milestones{gap:20px;font-size:9px;letter-spacing:1px;padding-top:10px}.product-story .future-copy h2{font-size:30px}.reveal-item{transition-duration:.7s}html[data-motion="on"] .work-cover:hover{transform:none;box-shadow:none}.site-header:after{height:1px}}
html[data-motion="off"] .reveal-item{opacity:1;translate:0;filter:none;transition:none}
html[data-motion="off"] *,html[data-motion="off"] *:before,html[data-motion="off"] *:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
html[data-motion="off"]{scroll-behavior:auto}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto!important}.reveal-item{opacity:1!important;translate:0!important;filter:none!important}.hero-image,.hero-content,.device-stage>img,.device-halo{transform:none!important;opacity:1!important}.product-story{height:auto!important;min-height:0!important}.product-sticky{position:static!important;min-height:0!important}*,*:before,*:after{animation:none!important;transition:none!important}}
