/* Motion owns transforms, not layout. Static/no-JS content remains fully available. */
.motion-enabled main { overflow-x: clip; }
.parallax-media, .scroll-photo { overflow: hidden; }
.motion-enabled .scroll-background::before {
    inset-block: -90px;
    translate: 0 var(--depth-y, 0px);
    will-change: transform;
}
.motion-enabled .scroll-photo > img {
    scale: 1.16;
    translate: 0 var(--depth-y, 0px);
    will-change: transform;
}
.reading-progress { position: fixed; z-index: 25; inset: 0 0 auto; height: 3px; pointer-events: none; }
.reading-progress span { display: block; width: 100%; height: 100%; transform: scaleX(0); transform-origin: left; background: #b89962; }
.motion-paused .reading-progress { display: none; }
.footer-bottom { flex-wrap: wrap; align-items: center; }
.motion-enabled .product-card { transition: translate .32s var(--ease), box-shadow .32s var(--ease); }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
    .motion-enabled .product-card:hover { translate: 0 -9px; box-shadow: 0 24px 44px #17352225; }
    .motion-enabled .image-action { transition: rotate .3s var(--ease); }
    .motion-enabled .product-image:hover .image-action { rotate: -8deg; }
    .motion-enabled .benefit-icon { transition: rotate .35s var(--ease), scale .35s var(--ease); }
    .motion-enabled .benefit:hover .benefit-icon { rotate: -9deg; scale: 1.09; }
}
.motion-enabled .hero-scroll .icon { animation: scroll-cue 1.3s ease-in-out 3; }
@keyframes scroll-cue { 0%,100% { translate: 0 0; } 50% { translate: 0 8px; } }
.motion-enabled .enquiry-timeline li::before { content: ''; position: absolute; inset: -2px 0 auto; height: 3px; background: var(--brown); transform: scaleX(var(--step-progress,0)); transform-origin: left; }
@media (max-width: 700px) {
    .motion-enabled .scroll-background::before { inset-block: -40px; }
    .motion-enabled .scroll-photo > img { scale: 1.11; }
}
/* OS reduction take precedence over every decorative CSS effect. */
.motion-paused, .motion-paused * { scroll-behavior: auto !important; }
.motion-paused *, .motion-paused *::before, .motion-paused *::after {
    animation: none !important;
    transition: none !important;
}
.motion-suspended .hero-scroll .icon { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
    .scroll-background::before, .scroll-photo > img { translate: none !important; scale: none !important; }
}