/* Motion is progressive: page content remains available without JavaScript. */
:root{--motion-ease:cubic-bezier(.22,1,.36,1)}
html{scroll-padding-top:125px}
.site-header{position:sticky;top:0;z-index:40;background:rgba(247,246,242,.96);backdrop-filter:blur(14px);transition:transform .34s var(--motion-ease),box-shadow .3s ease;will-change:transform}
.site-header.is-scrolled{box-shadow:0 8px 30px rgb(20 35 25 / .07)}
.site-header.is-hidden{transform:translateY(calc(-100% - 12px));pointer-events:none}
.hero-visual{overflow:hidden}
.hero-visual>img{transform:translate3d(0,var(--hero-offset,0px),0) scale(1.14);will-change:transform}
.hero-copy>*{animation:rise-in .85s var(--motion-ease) both}
.hero-copy>.eyebrow{animation-delay:.08s}
.hero-copy>h1{animation-delay:.18s}
.hero-copy>p{animation-delay:.3s}
.hero-copy>.button{animation-delay:.42s;animation-duration:.7s}
.hero-copy>.hero-meta{animation-delay:.54s}
.hero-visual{animation:soft-in 1.1s ease both}
.hero-label{animation:label-in 1s var(--motion-ease) .45s both}
.hero-index{animation:soft-in .8s ease .6s both}
dialog[open]{animation:popup-in .34s var(--motion-ease) both}
dialog[open]::backdrop{animation:soft-in .3s ease both}
dialog.is-closing::backdrop{animation:soft-out .18s ease both}
.product-art .round-arrow{transition:transform .3s var(--motion-ease),background .3s}
.product-art:hover .round-arrow{transform:rotate(45deg);background:#fff}
@keyframes rise-in{from{opacity:0;transform:translate3d(0,26px,0)}to{opacity:1;transform:translate3d(0,0,0)}}
@keyframes soft-in{from{opacity:0}to{opacity:1}}
@keyframes soft-out{from{opacity:1}to{opacity:0}}
@keyframes label-in{from{opacity:0;transform:translateY(18px) rotate(-8deg)}to{opacity:1;transform:translateY(0) rotate(-4deg)}}
@keyframes popup-in{from{opacity:0;transform:translateY(18px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}
@media(max-width:640px){html{scroll-padding-top:95px}.hero-copy>*{animation-duration:.65s}.hero-visual>img{transform:scale(1.04);will-change:auto}}
@media(prefers-reduced-motion:reduce){
 html{scroll-behavior:auto}
 *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
 .hero-visual>img{transform:none;will-change:auto}
 .site-header{will-change:auto}
}