/* Colour, movement and media interactions shared by all documents. */
.client-section{padding:76px 0 72px}
.client-heading h2{font-size:clamp(25px,3vw,36px)}
.client-heading{flex-wrap:wrap}
.client-controls .icon-button{width:42px;height:42px;flex-shrink:0}
.client-pause{font-size:16px}
.client-viewport{--logo-width:180px;--logo-gap:42px;overflow:hidden;position:relative;margin-top:36px;padding:12px 0;touch-action:pan-y;cursor:grab;mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent)}
.client-viewport:focus-visible{outline:2px solid var(--orange);outline-offset:5px;border-radius:4px}
.client-viewport.dragging{cursor:grabbing}
.client-track{display:flex;width:max-content;max-width:none;gap:0;margin:0;padding:0;overflow:visible;will-change:transform}
.client-logo-set{display:flex;align-items:center;gap:var(--logo-gap);padding-right:var(--logo-gap);flex-shrink:0}
.client-logo-set img{display:block;flex:0 0 var(--logo-width);width:var(--logo-width);height:105px;object-fit:contain;filter:none;opacity:1;transition:transform .3s}
.client-logo-set img:hover{transform:scale(1.045)}
/* Without JS the original colour logos remain available by native scrolling. */
.client-viewport:not(.is-animated){overflow-x:auto;mask-image:none}
.client-track>img{width:var(--logo-width);height:105px;object-fit:contain;filter:none;opacity:1;flex-shrink:0;margin-right:var(--logo-gap)}
.footer-main{padding-bottom:32px}
.footer-badges{display:flex;justify-content:center;align-items:stretch;gap:30px;padding:38px 0 45px;margin:0;border-top:1px solid #ffffff20}
.footer-badge{background:#fff;border:1px solid #dbe2e1;border-radius:8px;padding:20px;display:grid;place-items:center;width:280px;min-height:225px;box-shadow:0 16px 36px #0412172b}
.footer-badges .footer-badge img,.footer-badges .footer-badge img+img{display:block;width:100%;height:190px;padding:0;border-radius:0;object-fit:contain;background:white}
img,.project-image,.detail-drawing,.service-card-image,.dialog-image-wrap,.footer-badge,.client-viewport{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}
img{-webkit-user-drag:none}
.project-image img,.detail-drawing img,.service-card-image img,.dialog-image-wrap img,.footer-badge img{pointer-events:none}
.button .icon,.text-link .icon{transition:transform .25s}
.button:hover .icon,.text-link:hover .icon{transform:translate(2px,-2px)}
.service-overview-card,.project-card,.footer-badge{transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease}
.home-hero .hero-photo{animation:workshop-depth 24s ease-in-out infinite alternate}
@keyframes workshop-depth{from{transform:scale(1)}to{transform:scale(1.055)}}
@media(hover:hover) and (pointer:fine){
  .service-overview-card:hover,.footer-badge:hover{transform:perspective(900px) translateY(-6px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg));box-shadow:0 20px 45px #10262d18;border-color:#d578573d}
  .project-card:hover{transform:perspective(900px) translateY(-5px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg))}
}
@media(max-width:700px){
  .client-section{padding:48px 0}
  .client-heading{gap:20px;align-items:center}
  .client-heading>div:first-child{flex:1 1 200px}
  .client-heading h2{font-size:26px;max-width:300px}
  .client-controls .icon-button{width:36px;height:36px}
  .client-viewport{--logo-width:140px;--logo-gap:30px;margin-top:25px;padding:8px 0}
  .client-logo-set img,.client-track>img{height:88px}
  .footer-badges{gap:18px;padding:30px 0;flex-wrap:wrap}
  .footer-badge{width:240px;min-height:210px;padding:15px}
  .footer-badges .footer-badge img{height:180px}
}
@media(prefers-reduced-motion:reduce){
  .home-hero .hero-photo{animation:none}
  .service-overview-card,.project-card,.footer-badge,.client-logo-set img{transition:none}
  .service-overview-card:hover,.project-card:hover,.footer-badge:hover{transform:none}
  .button:hover .icon,.text-link:hover .icon{transform:none}
}