/* Original architectural croquis are decorative, below all card content. */
.service-card::after { display: none; }
.service-card .service-art,
.process-grid .process-sketch {
  position: absolute;
  pointer-events: none;
  object-fit: contain;
  object-position: right center;
  filter: grayscale(1) invert(1);
  mix-blend-mode: screen;
}
.service-card .service-art {
  inset: 16% -4% auto auto;
  width: 78%;
  height: 74%;
  z-index: -2;
  opacity: .2;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 68%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 68%);
}
.process-grid > article { isolation: isolate; overflow: hidden; }
.process-grid > article > :not(.process-sketch) { position: relative; z-index: 1; }
.process-grid .process-sketch {
  top: 3px;
  right: -3px;
  width: 65%;
  height: 170px;
  z-index: 0;
  opacity: .24;
  object-position: right top;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 65%), linear-gradient(180deg, #000 24%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent, #000 65%), linear-gradient(180deg, #000 24%, transparent 100%);
  mask-composite: intersect;
}
:root[data-theme="light"] .service-card .service-art,
:root[data-theme="light"] .process-grid .process-sketch {
  filter: grayscale(1);
  mix-blend-mode: multiply;
  opacity: .22;
}
:root[data-theme="light"] .process-grid .process-sketch { opacity: .26; }
@media (max-width: 680px) {
  .service-card .service-art { width: 80%; height: 70%; top: 18%; }
  .process-grid .process-sketch { width: 60%; height: 155px; }
}