/* Equal image windows, focused on each subject, without an outer artwork panel. */
#main > .hero .hero-art.home-clients {
  display: flex;
  flex-direction: column;
  height: auto;
  min-height: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
  overflow: visible;
}
.home-clients::after { display: none; }
.home-client-stage { display: grid; min-width: 0; }
.home-client-slide {
  grid-area: 1 / 1;
  display: grid;
  grid-template-rows: auto 112px;
  margin: 0;
  min-width: 0;
}
.home-client-slide[hidden], .home-client-controls[hidden] { display: none; }
.home-client-image { position: relative; width: 100%; aspect-ratio: 2 / 1; overflow: hidden; }
.home-client-image img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center;
}
/* The door sits right of center; this centers the entry in the common frame. */
.home-client-image[data-client="municipal"] img { object-position: 68% 50%; }
/* Keep the bus at left and the approaching plane at right in the same crop. */
.home-client-image[data-client="transportation"] img { object-position: 37% 50%; }
/* Isolate the middle panels of the original three-panel panoramas. */
.home-client-image[data-client="construction"] img { width: 280%; left: -90%; object-position: 50% 45%; }
.home-client-image[data-client="manufacturing"] img { width: 300%; left: -100%; object-position: 50% 90%; }
.home-client-slide figcaption { padding: 20px 4px; text-align: center; }
.home-client-slide strong { display: block; font-size: 22px; line-height: 1.25; }
.home-client-slide figcaption span { display: block; margin-top: 8px; font-size: 15px; line-height: 1.5; color: #d2deed; }
.home-client-slide.is-entering { animation: home-client-enter 650ms ease-out both; }
.home-client-controls {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 4px;
  flex: 0 0 auto;
}
.home-client-count { min-width: 54px; margin-right: 8px; color: #e2eaf6; font-size: 14px; font-variant-numeric: tabular-nums; }
.home-client-controls button {
  display: inline-grid;
  place-items: center;
  min-width: 48px;
  height: 48px;
  padding: 0 12px;
  border: 1px solid #d8e7ff40;
  border-radius: 8px;
  background: #e7efff0a;
  color: #fff;
  font: inherit;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
}
.home-client-controls .home-client-toggle { min-width: 76px; font-size: 13px; font-weight: 700; }
.home-client-controls button:hover { background: #d0e2ff20; border-color: #e3edff80; }
/* Give the Home photos more of the desktop hero without changing other pages. */
@media (min-width: 901px) {
  #main > .hero > .hero-grid:has(> .home-clients) {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  }
}
@media (min-width: 1200px) {
  #main > .hero > .hero-grid:has(> .home-clients) {
    width: min(1480px, calc(100% - 42px));
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@keyframes home-client-enter { from { opacity: 0; } to { opacity: 1; } }
@media (max-width: 480px) {
  .home-client-slide { grid-template-rows: auto 100px; }
  .home-client-slide figcaption { padding: 16px 4px; }
  .home-client-slide strong { font-size: 20px; }
  .home-client-slide figcaption span { font-size: 14px; }
  .home-client-controls button { min-width: 44px; height: 44px; }
}
@media (prefers-reduced-motion: reduce) { .home-client-slide.is-entering { animation: none; } }
@media print {
  .home-client-controls { display: none; }
  .home-client-slide.is-entering { animation: none; }
}