/* Transform and opacity effects avoid shifting the surrounding page layout. */
@media(prefers-reduced-motion:no-preference){
 html{scroll-behavior:smooth}
 .motion-reveal{translate:0 38px;transition:opacity .85s ease var(--reveal-delay,0ms),translate .85s cubic-bezier(.16,1,.3,1) var(--reveal-delay,0ms),transform .35s ease,box-shadow .35s ease}
 .motion-reveal.motion-visible{translate:0 0}
 .btn,.about-button,.home-partner,.product-link,.product-enquiry,.home-product-cta{transition:translate .25s ease,background .25s ease,color .25s ease,box-shadow .25s ease}
 .btn>span,.about-button>span,.product-link>span,.product-enquiry>span{display:inline-block;transition:transform .25s ease}
 .about-benefit,.about-purpose,.about-certification-card,.product-feature,.home-product,.product-detail-art{transition:translate .7s ease,transform .45s cubic-bezier(.16,1,.3,1),box-shadow .4s ease,border-color .4s ease}
 .about-landfill,.about-seedling{transition:translate .85s ease,opacity .85s ease,scale .7s ease,box-shadow .4s ease}
 .product-visual img,.product-detail-art img,.home-product-photo img{transition:scale .9s cubic-bezier(.16,1,.3,1)}
 header nav a,footer nav a{transition:color .25s ease,translate .25s ease,border-color .25s ease}
 .field{transition:border-color .2s ease,box-shadow .2s ease,background .2s ease}
 .field:focus{border-color:#b9e42c;box-shadow:0 0 0 3px #b9e42c22}
 .btn:active,.about-button:active,.home-product-cta:active{translate:0 1px}
 .btn:focus-visible,.about-button:focus-visible,.product-link:focus-visible{outline:2px solid #a6cf43;outline-offset:5px}
}
@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
 .btn:hover,.about-button:hover,.home-partner:hover,.product-enquiry:hover{translate:0 -3px;box-shadow:0 9px 24px #03372924}
 .btn:hover>span,.about-button:hover>span,.product-link:hover>span,.product-enquiry:hover>span{transform:translateX(6px)}
 .home-product:hover{transform:translateY(-6px);box-shadow:0 18px 40px #001c1540}
 .home-product:hover .home-product-photo img{scale:1.025}
 .product-detail-art:hover img,.product-tile:hover .product-visual img{scale:1.035}
 .about-benefit:hover,.about-purpose:hover,.about-certification-card:hover,.product-feature:hover{transform:translateY(-6px);box-shadow:0 14px 30px #06382d20}
 .about-landfill:hover,.about-seedling:hover{scale:1.015;box-shadow:0 18px 36px #06382d20}
 header nav a:hover,footer nav a:hover{translate:0 -2px}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* Distinct accents for Home, About, We Serve, Offerings, Gallery and Contact. */
@media(prefers-reduced-motion:no-preference){
 .home-product-heading{animation:card-copy-arrive 1.1s .45s both}
 .home-product-action{animation:card-copy-arrive 1.1s .65s both}
 .about-stats dl.sequence-arrived dt{animation:stat-emerge 1s both}
 .about-certification-grid.sequence-arrived .about-certification-accent{transform-origin:left;animation:accent-grow 1.2s .4s both}
 .about-benefit.sequence-arrived .about-benefit-icon,.about-purpose.sequence-arrived .about-purpose-icon{animation:icon-settle 1.2s .25s both}
 .product-orbit{animation:orbit-enter 2s ease-out both}
 .gallery-tabs.sequence-arrived{animation:accent-settle .7s both}
 .product-enquire{transition:translate .25s ease,box-shadow .25s ease,background .25s ease}
 .product-enquire>span,.product-pagination a>span,.product-back>span{display:inline-block;transition:transform .3s ease}
 .product-feature-icon,.about-certification-mark{transition:transform .45s cubic-bezier(.16,1,.3,1)}
 .gallery-tabs button{transition:background .3s ease,color .3s ease,box-shadow .3s ease}
 #contact-form{transition:box-shadow .35s ease,border-color .35s ease}
 #contact-form:focus-within{box-shadow:0 0 0 1px #b9e42c80,0 16px 35px #03372922}
 @keyframes card-copy-arrive{from{opacity:0;translate:0 14px}to{opacity:1;translate:0 0}}
 @keyframes stat-emerge{from{opacity:0;scale:.86}to{opacity:1;scale:1}}
 @keyframes accent-grow{from{scale:0 1}to{scale:1 1}}
 @keyframes icon-settle{0%{rotate:-12deg;scale:.85}65%{rotate:4deg;scale:1.06}100%{rotate:0deg;scale:1}}
 @keyframes orbit-enter{from{opacity:0;scale:.8}to{opacity:1;scale:1}}
 @keyframes accent-settle{from{scale:.95}to{scale:1}}
}
@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
 .product-enquire:hover{translate:0 -3px;box-shadow:0 12px 25px #03372925}
 .product-enquire:hover>span,.product-pagination a:hover>span{transform:translateX(5px)}
 .product-back:hover>span{transform:translateX(-5px)}
 .product-feature:hover .product-feature-icon{transform:rotate(-8deg) scale(1.08)}
 .about-certification-card:hover .about-certification-mark{transform:scale(1.08)}
 .gallery-tabs button:hover{box-shadow:inset 0 0 0 1px #b9e42c}
 .industries-grid-section .card li{transition:translate .25s ease,color .25s ease}
 .industries-grid-section .card li:hover{translate:3px 0;color:#50771c}
}