/* News categories retain their labels and use distinct brand colors. */
[data-page="news"] .news-row[data-category="industry"] .tag,
[data-page="index"] .home-news-list .news-category[data-news-category="industry"] {
  background: #21469d;
  border-color: #21469d;
  color: #fff;
}
[data-page="news"] .news-row[data-category="company"] .tag,
[data-page="index"] .home-news-list .news-category[data-news-category="company"] {
  background: #c6b331;
  border-color: #c6b331;
  color: #203454;
}
/* The frame reserves the original picture dimensions; only the image scales. */
:is([data-page="index"], [data-page="products"]) .product-card > .card-image-frame {
  flex: 0 0 auto;
  overflow: hidden;
  aspect-ratio: 1.48;
  background: #ededed;
}
[data-page="cases"] .case-card > .card-image-frame {
  overflow: hidden;
  aspect-ratio: 1.65;
}
:is([data-page="index"], [data-page="products"]) .product-card > .card-image-frame > img,
[data-page="cases"] .case-card > .card-image-frame > img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 0;
  max-height: none;
  aspect-ratio: auto;
  transform-origin: center;
}
:is([data-page="index"], [data-page="products"]) .product-card > .card-image-frame > img { object-fit: contain; }
[data-page="cases"] .case-card > .card-image-frame > img { object-fit: cover; }
@media (min-width: 1101px) {
  :is([data-page="index"], [data-page="products"]) .product-card > .card-image-frame { aspect-ratio: 1.5; }
}
@media (hover: hover) and (pointer: fine) {
  :is([data-page="index"], [data-page="products"], [data-page="cases"]) .card-image-frame > img,
  [data-page="index"] .case-mosaic img { transition: transform .4s cubic-bezier(.2,.65,.25,1); }
  :is([data-page="index"], [data-page="products"]) .product-card:is(:hover, :focus-within) > .card-image-frame > img,
  [data-page="cases"] .case-card:is(:hover, :focus-within) > .card-image-frame > img,
  [data-page="index"] .case-mosaic a:is(:hover, :focus-visible) > img { transform: scale(1.05); }
}
/* Override the old unconditional home-case hover on touch screens. */
@media (hover: none), (pointer: coarse) {
  :is([data-page="index"], [data-page="products"], [data-page="cases"]) .card-image-frame > img,
  [data-page="index"] .case-mosaic a:hover > img { transform: none; transition: none; }
}
@media (prefers-reduced-motion: reduce) {
  :is([data-page="index"], [data-page="products"], [data-page="cases"]) .card-image-frame > img,
  [data-page="index"] .case-mosaic a:is(:hover, :focus-visible) > img { transform: none !important; transition: none !important; }
}