/* DreamFx overrides, layered on top of the V7 (Webify) Webflow stylesheet.
   Loaded after it, so these win without editing the generated CSS — which
   would be overwritten the next time the mirror is refreshed. */

/* --- Project cards -------------------------------------------------------
   The template shipped one square 1080px placeholder for all six cards, so it
   could force `aspect-ratio: 1` on the card and have the image fill it exactly.
   The real project covers are 16:9, which left dead black space under each
   image. Give the image frame the ratio the artwork actually has and let the
   card height follow — the grid still equalises the two cards in a row. */
.portfolio-item {
  aspect-ratio: auto;
}

.portfolio-item .projects-image-card-wrapper {
  flex: 0 0 auto;
  width: 100%;
  aspect-ratio: 16 / 9;
}

.portfolio-item .projects-image-card-wrapper .image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* --- Tags on project covers ----------------------------------------------
   Template covers were uniformly dark, so translucent grey chips read fine.
   Half the real covers are near-white studio renders, where the same chips
   disappear. Anchor them with a dark scrim instead of tinting per image. */
.projects-image-card-wrapper .chips.grey-chips {
  background-color: rgba(12, 12, 12, .62);
  border-color: rgba(255, 255, 255, .16);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.projects-image-card-wrapper .chips.grey-chips div {
  color: #fff;
}

/* --- Client logo ticker --------------------------------------------------
   Template logos were square glyphs; the real client logos are wide wordmarks
   of varying proportion. Constrain both axes and centre them in the tile. */
.logo-ticker-block-image {
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 34px;
  object-fit: contain;
}

/* --- Webflow badge -------------------------------------------------------
   webflow.js injects a "Made in Webflow" badge at runtime, so it cannot be
   deleted from the markup — it is hidden here instead, and the node is also
   removed by script in the shell for good measure. */
.w-webflow-badge {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}