@keyframes reveal-up{from{opacity:0;transform:translateY(34px)}to{opacity:1;transform:translateY(0)}}
@keyframes reveal-side{from{opacity:0;transform:translateX(42px)}to{opacity:1;transform:translateX(0)}}
@keyframes image-arrive{from{opacity:.35;transform:scale(.96)}to{opacity:1;transform:scale(1)}}
@keyframes soft-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}

.heroCopy{animation:reveal-up .8s cubic-bezier(.2,.7,.2,1) both}
.heroImage{animation:reveal-side .9s .12s cubic-bezier(.2,.7,.2,1) both;overflow:hidden}
.heroImage img{animation:image-arrive 1.05s .15s cubic-bezier(.2,.7,.2,1) both;transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.heroImage:hover img{transform:scale(1.035)}
.heroImage b{animation:soft-float 4s ease-in-out infinite}

.proof span,.heading,.storyGrid article,.lifestyle>img,.lifestyle>div,.setImage,.setCopy,.detailGrid article,.faq>div,.care>div,.care form,.final>*{animation:reveal-up .65s ease both;animation-timeline:view();animation-range:entry 0% cover 28%}
.storyGrid article:nth-child(2),.detailGrid article:nth-child(2),.detailGrid article:nth-child(5){animation-delay:.08s}
.storyGrid article:nth-child(3),.detailGrid article:nth-child(3),.detailGrid article:nth-child(6){animation-delay:.16s}

.storyGrid article,.detailGrid article{transition:transform .32s ease,box-shadow .32s ease,border-color .32s ease;position:relative}
.storyGrid article:hover,.detailGrid article:hover{transform:translateY(-7px);box-shadow:0 20px 45px rgba(24,35,31,.10);z-index:2}
.storyGrid article:after{content:'';position:absolute;left:40px;right:100%;bottom:28px;height:2px;background:#80bd53;transition:right .35s ease}
.storyGrid article:hover:after{right:40px}

.lifestyle>img,.setImage img{transition:transform .8s cubic-bezier(.2,.7,.2,1),filter .5s ease}
.lifestyle{overflow:hidden}
.lifestyle:hover>img{transform:scale(1.018);filter:saturate(1.04)}
.setImage{overflow:hidden}
.setImage:hover img{transform:scale(1.035)}

.buy{position:relative;overflow:hidden;isolation:isolate}
.buy:before{content:'';position:absolute;inset:0;background:rgba(255,255,255,.14);transform:translateX(-105%) skewX(-18deg);transition:transform .55s ease;z-index:-1}
.buy:hover:before{transform:translateX(105%) skewX(-18deg)}
.buy span{transition:transform .25s ease}.buy:hover span{transform:translate(3px,-3px)}
nav a,.sizes div,footer a{transition:color .25s ease,transform .25s ease}
footer a:hover{color:#5f8e43;transform:translateX(4px)}
.sizes div:hover{transform:translateX(5px);color:#5f8e43}

details{transition:background-color .3s ease}details[open]{background:#f8faf6}summary span{transition:transform .3s ease}details[open] summary span{transform:rotate(45deg)}details p{animation:reveal-up .3s ease both}
.care input,.care textarea{transition:border-color .2s ease,box-shadow .2s ease,background .2s ease}.care input:focus,.care textarea:focus{outline:none;border-color:#80bd53;box-shadow:0 0 0 3px rgba(128,189,83,.16);background:#fff}

@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.001ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.001ms!important;animation-timeline:auto!important}}

/* Keep the complete-set image inside its own grid column. */
.set>*{min-width:0}
.setImage{position:relative;isolation:isolate;contain:paint}
.setImage img{display:block;width:100%;height:auto;max-width:100%;max-height:680px;margin:auto;object-fit:contain;transform-origin:center}
.setCopy{position:relative;z-index:2;background:#fff}
@media(max-width:900px){.setImage{padding:42px 6vw}.setImage img{max-height:520px}.setCopy{padding-top:60px}}
@media(max-width:560px){.setImage{padding:28px 5vw}.setImage img{max-height:390px}.setCopy{padding-top:45px}}