/* Shared Technical Studio header/footer; image paths are relative to this file. */
header,
footer {
  position: relative;
  isolation: isolate;
  background: var(--page);
}
header::before,
footer::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-repeat: no-repeat;
  background-size: cover;
  filter: grayscale(1) invert(1);
}
header::before {
  background-image: url("assets/technical-studio-header.webp");
  background-position: center 15%;
  opacity: .12;
}
header {
  border-bottom: 1px solid var(--line);
}
footer {
  min-height: 180px;
  align-items: center;
  border-top: 1px solid var(--line);
}
footer::before {
  background-image: url("assets/technical-studio-footer.webp");
  background-position: center 55%;
  opacity: .12;
}
footer a,
footer strong,
footer span {
  position: relative;
}
html[data-theme="dark"] header::before,
html[data-theme="dark"] footer::before {
  filter: none;
}
html[data-theme="dark"] header::before { opacity: .28; }
html[data-theme="dark"] footer::before { opacity: .24; }
.detail h1.service-masthead {
  background-image: linear-gradient(90deg, #111d, #111a), url('assets/service-workbench.web.webp');
}
.hero .product-caption a:not(.cta) { color: #076b64; text-shadow: none; }
.hero .product-caption a:not(.cta):hover { color: #a02b4e; }
@media (max-width: 700px) {
  header::before { background-position: 25% 12%; }
  footer {
    min-height: 220px;
    align-content: center;
    row-gap: 22px;
  }
  footer::before { background-position: 75% center; }
}