/* "Discover how companies use Polywall" section (#rec825881483).
   Our own hover reveal instead of Tilda's buggy SBS (it flickered; the SBS attributes are removed
   from the markup). As on the live site: grayscale at rest, on hover — a color photo + case caption.
   Pure opacity, no movement → stable on any static host (S3/CloudFront).

   By default we hide everything in the section and show only the grayscale bases + transparent hit
   areas (so there's no flash of color/captions before JS initializes). The reveal is via the .pw-on class. */
#rec825881483 .tn-elem {
  opacity: 0 !important;
  transition: opacity 0.35s ease !important;
  transform: none !important;
}
/* grayscale bases (visible at rest) + transparent hit areas (hover trigger) */
#rec825881483 [data-elem-id="1731588302325"],
#rec825881483 [data-elem-id="1731588336353"],
#rec825881483 [data-elem-id="1731588379029"],
#rec825881483 [data-elem-id="1731588405533"],
#rec825881483 [data-elem-id="1731078647186"],
#rec825881483 [data-elem-id="1731078647200"],
#rec825881483 [data-elem-id="1731078647169"],
#rec825881483 [data-elem-id="1731078647212"] {
  opacity: 1 !important;
}
/* on hover (the class is applied by pw-cards.js) */
#rec825881483 .tn-elem.pw-on {
  opacity: 1 !important;
}

/* Preload the color layer (on top of grayscale) — so hover is instant. */
#rec825881483 [data-elem-id="1731078647145"] .tn-atom {
  background-image: url("/images/tild3738-3036-4435-b166-393339393835______.webp") !important;
}
#rec825881483 [data-elem-id="1731078647175"] .tn-atom {
  background-image: url("/images/tild3562-3239-4232-b437-333632386464___1.webp") !important;
}
#rec825881483 [data-elem-id="1731078647191"] .tn-atom {
  background-image: url("/images/tild3135-3464-4133-a365-313064306439__img_9825.webp") !important;
}
#rec825881483 [data-elem-id="1731078647204"] .tn-atom {
  background-image: url("/images/tild6631-3031-4661-b039-313035383666__img_20210905_132114.webp") !important;
}

/* Touch/narrow screens: no hover → always show color + captions. */
@media (hover: none), (max-width: 980px) {
  #rec825881483 .tn-elem {
    opacity: 1 !important;
  }
}