/* Original holographic image with fine, continuous vector curves.
   The texture belongs to the card; the holographic sheet belongs to the viewport. */
.holo-surface,
.service-card.holo-surface,
.service-card.holo-surface:hover,
.trust-strip.holo-surface,
.home-repair-guides .repair-guide-links a.holo-surface {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background-color: transparent;
  background-image: url('assets/hologram-fine-lines.svg'), url('assets/hologram-holo.avif');
  background-attachment: scroll, fixed;
  background-position: 0 0, 0 0;
  /* One sheet, no tile seams; non-scaling vector strokes stay fine at any size. */
  background-size: cover, auto;
  background-repeat: no-repeat, repeat;
  background-blend-mode: overlay, overlay;
  border-color: #d6e0ef;
  /* A transform on the card would turn its fixed background into a local one. */
  transform: none;
  transition: border-color .2s, box-shadow .2s;
}
.holo-surface::before,
.holo-surface::after { content: none; }
.service-card.holo-surface:hover { border-color: #a9bfed; box-shadow: 0 14px 32px #20385b13; }
.service-card.holo-surface > p { color: #35465e; }
.service-card.holo-surface .service-number { color: #425168; }
.service-card.holo-surface .service-bottom { border-color: #8296b340; }
.service-card.holo-surface .service-icon,
.service-card.holo-surface .circle-arrow { background: #ffffffe0; border-color: #ffffff; }
.service-card.holo-surface:hover .circle-arrow { background: var(--blue); border-color: var(--blue); }
.trust-strip.holo-surface small { color: #35465e; }
.trust-strip.holo-surface > div { border-color: #8296b340; }
.hero-v2 .hero-reassurance.holo-surface {
  width: fit-content;
  padding: 10px 13px;
  border: 1px solid #dce4f2;
  border-radius: 12px;
  color: #35465e;
  line-height: 1.65;
}
.hero-reassurance.holo-surface > .icon { flex-shrink: 0; color: var(--blue); }
/* iOS Safari ignores fixed backgrounds. The small companion script only on
   this browser anchors the same image to the exact viewport origin. */
@supports (-webkit-touch-callout: none) {
  .holo-surface,
  .service-card.holo-surface,
  .service-card.holo-surface:hover,
  .trust-strip.holo-surface,
.home-repair-guides .repair-guide-links a.holo-surface {
    background-attachment: scroll, scroll;
    background-position: 0 0, var(--holo-viewport-x, 0px) var(--holo-viewport-y, 0px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .holo-surface,
  .service-card.holo-surface,
  .service-card.holo-surface:hover,
  .trust-strip.holo-surface,
.home-repair-guides .repair-guide-links a.holo-surface {
    background-attachment: scroll, scroll;
    background-position: 0 0, 0 0;
  }
}
@media (forced-colors: active) {
  .holo-surface,
  .service-card.holo-surface,
  .service-card.holo-surface:hover,
  .trust-strip.holo-surface,
.home-repair-guides .repair-guide-links a.holo-surface { background: Canvas; border-color: ButtonText; }
  .service-card.holo-surface > p, .trust-strip.holo-surface small { color: CanvasText; }
}

/* Keep the fixed foil visible on the three homepage repair-guide links. */
.home-repair-guides .repair-guide-links a.holo-surface:hover {
  border-color: #93a8e3;
  box-shadow: 0 5px 14px #20385b10;
}