.site-header { background: color-mix(in srgb, var(--paper) 96%, transparent); }

.hero-image { position: relative; }
.hero-image > .hero-photo {
  position: relative;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 66% center;
}
.hero-plate-brand {
  position: absolute;
  z-index: 2;
  left: 0;
  top: 0;
  visibility: hidden;
  overflow: hidden;
  pointer-events: none;
  border: 1px solid #bbb9b0;
  border-radius: 1px;
  box-shadow: 0 1px 2px #0005;
}
.hero-plate-brand > img { width: 100%; height: 100%; max-width: none; object-fit: fill; }

/* Scroll reveals only touch opacity and a short compositor-friendly offset. */
html.motion-ready .motion-reveal:not(.motion-visible) {
  opacity: 0;
  transform: translate3d(0, 10px, 0);
}
html.motion-ready .motion-reveal {
  transition: opacity 280ms ease-out, transform 280ms cubic-bezier(.2, .7, .25, 1);
}
html.motion-ready .motion-reveal.motion-visible { opacity: 1; transform: none; }

/* Keep pointer feedback subtle; avoid large image scaling and shadow repaint. */
.service-card { transition: border-color 180ms ease; }
.service-card:hover { transform: none; box-shadow: none; border-color: #b8b9ae; }
.service-card .service-image img,
.fleet-band > img { transition: none; transform: none; }
.service-card:hover .service-image img,
.fleet-band:hover > img { transform: none; }

@media (min-width: 761px) and (max-width: 1100px) {
  .hero-image > .hero-photo { object-position: 80% center; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation: none !important;
    transition-duration: .01ms !important;
  }
}