/* One motion language: simple slide-ins, gentle rises, settled photographs and drawn rules. */
:root{--hc-ease:cubic-bezier(.16,1,.3,1);--hc-motion-fast:220ms;--hc-motion-enter:640ms;--hc-slide-distance:40px}
/* 15 Oct 2026: the words wait for the motion script (at most 1.8 s, then the head script gives up and shows them), so
   first-screen entrances play without a flash. Photos and video are never held back, so the main photo still paints first
   (the 12 Oct loading rule). Reduced motion and no-JS never hide anything. */
.hc-motion-boot #main-content{visibility:hidden}
.hc-motion-boot #main-content :is(img,picture,video){visibility:visible}
/* The privacy notice has no entrances, so its words are never held back (they are its main content). */
.hc-motion-boot #main-content:has(.hc-policy){visibility:visible}
/* The page heading (h1) is never held back either: it is often the main content (news articles, 404), so its entrance is
   played by CSS from the first paint instead of waiting for the script (hc-motion.js leaves a first-screen h1 alone).
   The home heading belongs to the scroll-linked intro and is not included. */
.hc-motion-boot #main-content h1:not(.hc2-h1){visibility:visible}
/* Movement only, no fade: a heading that starts see-through is not counted as shown until the fade ends (Chrome's
   Largest Contentful Paint), so a fade would make news articles and the 404 page look ~0.6 s slower (P10a review F1). */
@keyframes hcHeadingRise{from{translate:0 12px}to{translate:0 0}}
@keyframes hcHeadingSlide{from{translate:-18px 0}to{translate:0 0}}
@media (prefers-reduced-motion:no-preference){
  #main-content h1:not(.hc2-h1):not(.hc-policy h1){animation:hcHeadingRise 620ms var(--hc-ease) backwards}
  #main-content.hc-split-page h1:not(.hc2-h1):not(.hc-policy h1),#main-content .hc-open h1:not(.hc2-h1):not(.hc-policy h1){animation-name:hcHeadingSlide;animation-duration:650ms}
}
.hc-motion-active .hc-motion-pending{opacity:0}
.hm-arr{display:inline-block;transition:transform var(--hc-motion-fast) var(--hc-ease)}
.hm-link{text-decoration:none!important;background:linear-gradient(var(--hc-yellow),var(--hc-yellow)) no-repeat 0 100%/0 2px;padding-bottom:2px;transition:background-size .3s var(--hc-ease),color .2s ease}
.hm-link:is(:hover,:focus-visible){background-size:100% 2px}
:is(a,button):is(:hover,:focus-visible) .hm-arr{transform:translateX(4px)}
:is(a,button):is(:hover,:focus-visible) .hm-ne{transform:translate(3px,-3px)}
.hm-heading-in{animation:hcHeadingIn 620ms var(--hc-ease) backwards}
.hc-motion-in{animation:hcContentIn var(--hc-motion-enter) var(--hc-ease) var(--motion-delay,0ms) backwards}
.hc-motion-in[data-motion="card"]{animation-name:hcCardIn;animation-duration:620ms}
.hc-motion-in[data-motion="image"]{animation-name:hcImageIn;animation-duration:800ms}
.hc-motion-in[data-motion="step"]{animation-name:hcStepIn;animation-duration:560ms}
.hc-motion-in[data-motion="left"]{animation-name:hcFromLeft;animation-duration:800ms}
.hc-motion-in[data-motion="right"]{animation-name:hcFromRight;animation-duration:800ms}
.hc2-intro-l.hc-motion-in{--hc-slide-distance:clamp(72px,8vw,120px);animation-duration:1000ms}
.hc2-intro-r.hc-motion-in{--hc-slide-distance:64px;animation-duration:850ms}
/* Scroll owns these positions directly: no timed animation, transition or catch-up loop. */
.hc-motion-active .hc-home-scroll{animation:none;transition:none;opacity:var(--hc-home-progress,1);translate:calc((1 - var(--hc-home-progress,1)) * var(--hc-home-travel)) 0}
.hc2-intro-l.hc-home-scroll{--hc-home-travel:clamp(-160px,-11vw,-88px)}
.hc2-intro-r.hc-home-scroll{--hc-home-travel:64px}
.hc-motion-active .hc-home-scroll:focus-within{opacity:1;translate:none}
.hc-motion-in[data-motion="rule"]{animation-name:hcRuleIn;transform-origin:left;animation-duration:780ms}
.hc-motion-in[data-motion="hero"]{animation-name:hcHeroSettle;animation-duration:1200ms}
.hc-motion-in:focus-within{animation:none}
.hc-lead-anim h1,.hc-lead-anim img{animation:none}
.hc-lead-anim img.hc-motion-in{animation:hcHeroSettle 1200ms var(--hc-ease) backwards}
.hc2-tile{position:relative}
.hc2-tile.hc-motion-in{animation-name:hcStepIn;border-top-color:transparent}
.hc2-tile::before{z-index:1}
/* Native borders keep both rows equally crisp at the site's fractional desktop scale. */
.hc2-tile.hc-motion-in::after{content:"";position:absolute;top:-2px;left:0;right:0;height:0;border-top:2px solid currentColor;transform-origin:left;animation:hcRuleIn .85s var(--hc-ease) var(--motion-delay,0ms) backwards;pointer-events:none}
.hc2-tile.hc2-all.hc-motion-in::after{border-top-width:4px;border-top-color:var(--hc-yellow);top:-4px}
.hc-gallery .hc-gal-img{transition:opacity .6s ease,transform 6s ease-out;transform:scale(1.018)}
.hc-gallery .hc-gal-img.is-on{transform:scale(1)}
.hc-read-progress{position:fixed;left:0;top:0;width:100%;height:3px;z-index:80;pointer-events:none;transform:scaleX(0);transform-origin:left;background:var(--hc-yellow)}
[data-mark]{background:linear-gradient(var(--hc-yellow),var(--hc-yellow)) no-repeat 0 88%/100% 34%;padding:0 .08em;margin:0 -.08em}
.hc2-intro [data-mark]{color:#fff;background-position:0 100%;background-size:100% .14em}
.hc-btn{transition:background .22s ease,color .22s ease,border-color .22s ease,box-shadow .3s var(--hc-ease),transform .3s var(--hc-ease)}
.hc-btn:active{transform:translateY(1px);box-shadow:none}
.hc-btn-yellow:focus-visible{outline-color:#727200}
.hc-ncard-img img,.hc-mrow .hc-cimg{transition:transform .7s var(--hc-ease),filter .7s ease}
.hc-ncard-img::after{height:3px;transition:transform .45s var(--hc-ease)}
.hc-gallery,.hc-map-card{box-shadow:0 1px 2px rgba(10,10,10,.07),0 12px 30px -22px rgba(10,10,10,.5)}
.hc-quote-card{box-shadow:0 2px 4px rgba(10,10,10,.03),0 20px 50px -30px rgba(10,10,10,.28)}
#hc-contact-form input,#hc-contact-form select,#hc-contact-form textarea{transition:border-color .2s ease,box-shadow .2s ease,background-color .2s ease}
#hc-contact-form label:focus-within{color:#0a0a0a}
.hc-mrow-go,.hc-mrow-q,.hc-article-nav a{transition:color .2s ease,text-decoration-color .2s ease}
.hc-article-nav a:is(:hover,:focus-visible){text-decoration:underline;text-decoration-color:#888800;text-underline-offset:5px}
.hc-ncard:is(:hover,:focus-visible) .hc-ncard-t{color:#0a0a0a!important}
.hc-pg{transition:background .22s ease,border-color .22s ease,transform .22s var(--hc-ease)}
.hc-pg:active{transform:translateY(1px)}
.hc-mobile.hc-open{animation:hcMenuIn .25s var(--hc-ease)}
@media(hover:hover) and (pointer:fine){
 .hc-btn:hover{transform:translateY(-2px)}
 .hc-btn-yellow:hover{box-shadow:0 5px 16px -8px rgba(112,112,0,.45)}
 .hc-btn-black:hover{box-shadow:0 5px 16px -8px rgba(0,0,0,.5)}
 .hc-btn:active{transform:translateY(1px)}
 .hc-ncard:hover .hc-ncard-img img{transform:scale(1.035)}
 .hc-mrow:has(a:hover) .hc-cimg{transform:scale(1.025)}
}
@keyframes hcHeadingIn{from{opacity:0;translate:0 8px}to{opacity:1;translate:0 0}}
@keyframes hcContentIn{from{opacity:0;translate:0 14px}to{opacity:1;translate:0 0}}
@keyframes hcCardIn{from{opacity:0;translate:0 16px}to{opacity:1;translate:0 0}}
@keyframes hcImageIn{from{opacity:.4;translate:0 10px}to{opacity:1;translate:0 0}}
@keyframes hcStepIn{from{opacity:0;translate:0 10px}to{opacity:1;translate:0 0}}
@keyframes hcFromLeft{from{opacity:0;translate:calc(-1 * var(--hc-slide-distance)) 0}to{opacity:1;translate:0 0}}
@keyframes hcFromRight{from{opacity:0;translate:var(--hc-slide-distance) 0}to{opacity:1;translate:0 0}}
@keyframes hcRuleIn{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes hcHeroSettle{from{transform:scale(1.018)}to{transform:scale(1)}}
@keyframes hcMenuIn{from{opacity:0;translate:0 -5px}to{opacity:1;translate:0 0}}
@media(max-width:900px){
 .hc-motion-in[data-motion]{animation-duration:600ms;animation-delay:var(--motion-delay,0ms)}
 .hc-motion-in[data-motion="image"]{animation-name:hcMobileImage;animation-duration:760ms}
 .hc-motion-in[data-motion="hero"]{animation-duration:1000ms}
 .hc-motion-in[data-motion="left"],.hc-motion-in[data-motion="right"]{animation-duration:700ms}
 .hm-heading-in{animation-duration:580ms;animation-delay:0ms}
 .hc-motion-in{--hc-slide-distance:26px}
 .hc2-intro-l.hc-motion-in,.hc2-intro-r.hc-motion-in{--hc-slide-distance:26px;animation-duration:720ms}
}
@keyframes hcMobileImage{from{opacity:.2;transform:translateY(10px) scale(.985)}to{opacity:1;transform:translateY(0) scale(1)}}
/* Report paragraphs stay static; headings, images and cards enter once, without a cascade. */
.hc-social-values .hc-motion-in,.hc-social-values .hm-heading-in{animation-delay:0ms;animation-duration:560ms}
/* Motion never gates access to content; every state remains visible without JS. */
@media(prefers-reduced-motion:reduce){
 *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
 .hc-motion-boot #main-content{visibility:visible!important}
 .hc-motion-active .hc-motion-pending{opacity:1!important}
 .hc-motion-in,.hc-motion-active .hc-home-scroll,.hm-wi{opacity:1!important;translate:none!important;clip-path:none!important}
 .hc-motion-in[data-motion="hero"],.hm-wi,.hc-gallery .hc-gal-img,.hm-arr,.hc-arrow,.hc-btn{transform:none!important}
 .hc-read-progress{display:none}
}

/* Split-opening pages (About Us, News, Contact, Machines opening): Our Values-style headings and photo wipes.
   Each entrance starts at opacity:0, the pending state, so nothing shows and then dims. */
.hc-split-page .hm-heading-in,.hc-open .hm-heading-in{animation-name:hcSlideIn;animation-duration:650ms}
.hc-motion-in[data-motion="wipe-right"]{animation-name:hcWipeRight;animation-duration:800ms}
.hc-motion-in[data-motion="wipe-left"]{animation-name:hcWipeLeft;animation-duration:800ms}
@keyframes hcSlideIn{from{opacity:0;translate:-18px 0}to{opacity:1;translate:0 0}}
@keyframes hcWipeRight{from{opacity:0;clip-path:inset(0 0 0 16%)}to{opacity:1;clip-path:inset(0)}}
@keyframes hcWipeLeft{from{opacity:0;clip-path:inset(0 16% 0 0)}to{opacity:1;clip-path:inset(0)}}