/* Content-only product focus layer.
   Existing Webflow structure, data-w-id attributes, scroll animation and carousel markup remain unchanged. */

.app-focus .section_portfolio .portfolio_item,
.app-focus .section_graphics .image-box-interactive1,
.app-focus .section_testimonials .testimonial-slide {
  background-color: #fff;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

/* Replace agency case-study artwork with genuine app assets without changing the animated containers. */
.app-focus .section_portfolio .portfolio_item:nth-child(3n + 1),
.app-focus .section_graphics .image-box-interactive1:nth-child(3n + 1),
.app-focus .section_testimonials .testimonial-slide:nth-child(3n + 1) {
  background-image: url("../images/product1/2.png");
}

.app-focus .section_portfolio .portfolio_item:nth-child(3n + 2),
.app-focus .section_graphics .image-box-interactive1:nth-child(3n + 2),
.app-focus .section_testimonials .testimonial-slide:nth-child(3n + 2) {
  background-image: url("../images/product1/3.png");
}

.app-focus .section_portfolio .portfolio_item:nth-child(3n),
.app-focus .section_graphics .image-box-interactive1:nth-child(3n),
.app-focus .section_testimonials .testimonial-slide:nth-child(3n) {
  background-image: url("../images/product2/512.png");
}

.app-focus .section_portfolio .portfolio_image,
.app-focus .section_graphics .work-image,
.app-focus .section_testimonials .testimonial-image-two {
  opacity: 0;
}

/* The original marquee keeps moving, but now carries product marks instead of unrelated technology/client logos. */
.app-focus .icon-container {
  background: #fff url("../images/product1/512.png") center / contain no-repeat;
}

.app-focus .icon-container:nth-of-type(3n) {
  background-image: url("../images/product2/512.png");
}

.app-focus .client-logo-image { opacity: 0; }

/* Guide cards retain their hover and overlay treatment while showing product assets, not old marketing artwork. */
.app-focus .blog-card {
  background-color: #fff;
  background-image: url("../images/product1/2.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

.app-focus .w-dyn-item:nth-child(even) .blog-card { background-image: url("../images/product2/512.png"); }
.app-focus .blog-post-image { opacity: 0; }

.app-focus .contact-image {
  background: #fff url("../images/product2/512.png") center / contain no-repeat;
}

.app-focus .contact-image > img { opacity: 0; }

/* Product assets never use a forced width/height pair or cover crop. */
.app-focus .product .prod1 .card > img {
  width: min(100%, 220px);
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: contain;
}

.app-focus .product .prod1 .card .img > img { display: none; }

.app-focus .product .prod1 .card .img a img {
  width: 155px;
  height: auto;
  object-fit: contain;
}

@media (prefers-reduced-motion: reduce) {
  .app-focus .track-vertical,
  .app-focus .track-vertical-alt { animation-play-state: paused; }
}