/* Infomaniak/PHP rendering fixes. Keep the visual design identical while avoiding
   browser dimension hints from stretching responsive images. */
img {
  height: auto;
}

.hero-image {
  width: 100%;
  height: auto;
  object-fit: contain;
}

.creative-portrait-card img,
.portrait-frame img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

/* The source logo is transparent; do not place it on a white tile. */
.brand-mark-wrap {
  background: transparent;
  box-shadow: none;
  overflow: visible;
}

.brand-mark {
  object-fit: contain;
}

/* Preserve smooth motion when JS is available. */
.reveal {
  will-change: opacity, transform;
}

.service-explode-card,
.dna-side-card,
.dna-helix-line,
.dna-helix-highlight,
.dna-base-pair {
  will-change: opacity, transform;
}