/* Merchas motion layer. Existing identity and native scrolling stay unchanged.
   Every repeating scene is viewport-gated, globally pausable and reduced-motion aware. */
.site-motion-toggle{display:inline-flex;align-items:center;gap:9px;min-height:44px;padding:8px 11px;border:1px solid var(--line);border-radius:3px;background:transparent;font-size:11px;line-height:1.3;white-space:nowrap}
.site-motion-toggle>span:first-child{font-size:16px;width:14px;text-align:center}.site-motion-toggle:hover{background:var(--lime);border-color:var(--lime)}.site-motion-toggle:disabled{cursor:default;opacity:.75}
.photo-caption{display:flex;justify-content:space-between;align-items:center;gap:14px}.photo-caption>span{flex:1}.photo-caption strong{display:inline}.photo-caption .site-motion-toggle{flex:none}
/* Compact rhythm follows the shorter copy, rather than leaving empty paragraph space. */
.everyone{padding-top:82px;padding-bottom:36px}.everyone-card>p{margin:17px 0 22px;line-height:1.65}.services{padding-block:74px 84px;align-items:start}.section-intro>p:not(.eyebrow){line-height:1.65}.service-content p{line-height:1.7}.service-content{padding-bottom:22px}.process{padding-block:86px;gap:64px;align-items:center}.process-steps p{line-height:1.55}.process-visual{min-height:550px}.process-steps button{padding-block:17px}.faq{padding-block:84px}.article-body p,.article-body li{line-height:1.75}.article-body h2{margin-top:30px}.hero-description{max-width:410px}
.motion-entry{transition:transform .7s var(--ease),opacity .7s var(--ease);transition-delay:var(--motion-delay,0ms)}
/* Nothing disappears: all content remains readable if observation stops or JS fails. */
.motion-ready .motion-awaiting{transform:translateY(20px);opacity:1}
@media(prefers-reduced-motion:no-preference){
 .motion-ready .hero h1{animation:merchas-enter .75s var(--ease) both}.motion-ready .hero .accent-word:after{transform-origin:left;animation:merchas-underline .9s .15s var(--ease) both}
 .motion-ready .hero-art{animation:merchas-enter .85s var(--ease) both}
 .motion-ready .inner-hero h1{animation:merchas-enter .65s var(--ease) both}



 .motion-ready .statement.motion-active .statement-symbol{animation:merchas-turn 16s linear infinite}
 .motion-ready .hero-art.motion-active .hero-photo img{animation:merchas-breathe 9s ease-in-out infinite}
 .button>span,.round-arrow,.everyone-link b,.audiences b{transition:transform .3s var(--ease)}
 .button:hover>span,.button:focus-visible>span,.garment-card:hover .round-arrow,.garment-card:focus-visible .round-arrow,.everyone-card:hover .everyone-link b{transform:translate(3px,-3px)}
 .garment-card .garment-image{transition:transform .5s var(--ease)}
 .garment-card:hover .garment-image,.garment-card:focus-visible .garment-image{transform:translateY(-5px)}
 .faq details[open]>p{animation:merchas-enter .3s var(--ease)}
}
@keyframes merchas-enter{from{transform:translateY(15px)}to{transform:translateY(0)}}
@keyframes merchas-underline{from{transform:scaleX(.1)}to{transform:scaleX(1)}}
@keyframes merchas-turn{to{transform:rotate(360deg)}}
@keyframes merchas-breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.015)}}
.motion-stopped *,.motion-stopped *:before,.motion-stopped *:after,.motion-hidden *,.motion-hidden *:before,.motion-hidden *:after{animation-play-state:paused!important}
.motion-stopped .motion-awaiting{opacity:1;transform:none}
.motion-ready .process-visual.motion-offscreen .print-scanner{animation-play-state:paused!important}
@media(max-width:900px){.process{gap:35px}.services{gap:35px}}
@media(max-width:600px){.everyone{padding-top:48px;padding-bottom:12px}.services{padding-block:48px 56px}.process{padding-block:56px}.faq{padding-block:58px}.process-visual{min-height:470px}.photo-caption{gap:7px;align-items:center}.photo-caption .site-motion-toggle{font-size:10px;padding-inline:8px}.hero-description{margin-block:18px}.process-steps{margin-top:20px}.section-heading{margin-bottom:24px}}
@media(max-width:360px){.photo-caption>span{font-size:10px}}
@media(prefers-reduced-motion:reduce){.motion-ready *, .motion-ready *:before,.motion-ready *:after{animation:none!important;transition:none!important}.motion-ready .motion-awaiting{opacity:1;transform:none}}

/* Service accordion: deliberate hover/focus feedback without opening on hover. */
.services .service-list details{border-radius:3px;transition:background-color .22s ease;transition-delay:0s}
.services .service-list summary h3,.services .service-list .row-number{transition:transform .24s var(--ease),color .24s ease}
.services .service-list .expand{transition:transform .24s var(--ease),background-color .24s ease;display:grid;place-items:center;border-radius:50%;flex-shrink:0}
.services .service-list details:focus-within{background:#edf1e6}
.services .service-list summary:focus-visible{outline:2px solid var(--ink);outline-offset:4px}
.services .service-list summary:focus-visible h3{transform:translateX(5px)}
.services .service-list summary:focus-visible .expand{background:var(--lime)}
@media(hover:hover) and (pointer:fine){
 .services .service-list details:hover{background:#edf1e6}
 .services .service-list details:hover summary h3,.services .service-list details:hover .row-number{transform:translateX(5px)}
 .services .service-list details:hover .expand{background:var(--lime)}
}
@media(prefers-reduced-motion:no-preference){
 .motion-ready:not(.motion-stopped) .services details[open] .service-content{animation:merchas-service-open .28s var(--ease) both}
}
@keyframes merchas-service-open{from{opacity:.35;transform:translateY(7px)}to{opacity:1;transform:translateY(0)}}
.motion-stopped .services .service-list *{transition:none!important}
.motion-stopped .services .service-content{animation:none!important}
@media(prefers-reduced-motion:reduce){.services .service-list *{transition:none!important;animation:none!important}.services .service-list summary h3,.services .service-list .row-number{transform:none!important}}