/* FI/EN optimized hero: user-approved Sunburst image and authentic Neumann grille.
   Initial fitting preserves the outpaint R01 geometry and horizontal gradient.
   One complete image at every viewport width.
   The frame follows the approved 1672 x 941 photograph's cover geometry.
   Aligning the taller image to its bottom preserves the stand and lets
   the additional pixels extend above the old frame. No new lightening:
   .hero::after inherits every approved horizontal-gradient stop. */
/* Raise only the heading and subtitle by 10–14 px, continuously with width.
   Their flow space stays unchanged so the CTA and image keep their positions. */
html:is([lang="fi"], [lang="en"]) .hero-copy > h1,
html:is([lang="fi"], [lang="en"]) .hero-copy > .hero-subtitle {
  position: relative;
  top: clamp(-14px, -1vw, -10px);
}
/* EN typography trial: follow the approved FI heading scale and text lift.
   Let the enlarged heading grow upward from its previous flow height, so
   the subtitle can rise slightly and the CTA keeps its accepted position. */
html[lang="en"] .hero-copy {
  --hero-heading-size: clamp(2rem, calc(1.25rem + 2.5vw), 3.25rem);
  --hero-heading-lines: 3;
  --hero-heading-growth: calc((var(--hero-heading-size) - var(--text-h1)) * var(--hero-heading-lines) * 1.18);
}
html[lang="en"] .hero h1 {
  font-size: var(--hero-heading-size);
  margin-top: calc(-1 * var(--hero-heading-growth));
}
html[lang="en"] .hero-copy > h1,
html[lang="en"] .hero-copy > .hero-subtitle {
  top: calc(clamp(-14px, -1vw, -10px) - clamp(.75rem, calc(2.25rem - 5vw), 1.25rem));
}
@media (width < 540px) {
  html[lang="en"] .hero-copy { --hero-heading-lines: 4; }
}
/* A balanced three-line heading keeps the longer English copy clear of the
   grille at intermediate widths: Premium audio / production since 1995. */
@media (min-width: 540px) and (width < 900px) {
  html[lang="en"] .hero-accent { white-space: nowrap; }
  html[lang="en"] .hero-production-break { display: initial; }
}
html:is([lang="fi"], [lang="en"]) .hero-media {
  container-type: size;
}
.hero-photo-frame {
  position: absolute;
  width: max(100cqw, 177.68331562cqh);
  aspect-ratio: 1672 / 941;
  left: min(0px, calc(78vw - 475px));
  top: 100%;
  transform: translateY(-100%);
}
html:is([lang="fi"], [lang="en"]) .hero .hero-photo-frame img {
  position: absolute;
  inset: auto;
  left: 0;
  bottom: 0;
  width: 100%;
  height: auto;
  max-width: none;
  object-fit: fill;
  object-position: 0 0;
  mask-image: none;
  -webkit-mask-image: none;
}
@media (min-width: 640px) {
  .hero-photo-frame {
    left: 20%;
    transform: translate(-20%, -100%);
  }
}
@media (min-width: 834px) {
  .hero-photo-frame {
    left: 50%;
    top: 48%;
    transform: translate(-50%, -48%);
  }
}
@media (width < 480px) {
  .hero-photo-frame {
    /* Preserve the approved outpaint R01 scale and bottom alignment.
       The wall monitor is now removed; no vertical fade is used.
       Offset compensates for the change of scale around the microphone. */
    height: 100cqh;
    width: auto;
    top: auto;
    bottom: 0;
    left: min(
      calc(min(0px, calc(78vw - 475px)) + var(--hero-photo-shift) - var(--hero-photo-inset) * 1.06),
      calc(100cqw - 119.55cqh - 5px)
    );
    transform: none;
  }
}
/* A reserved desktop scrollbar can leave only 305 px of a 320 px viewport.
   Reclaim a little of the copy's left margin only in that exceptional case;
   keep its font, line breaks and vertical position unchanged. */
@media (width < 340px) {
  html[lang="fi"] .hero-copy {
    left: clamp(-12px, calc(100% + 40px - 320px), 0px);
  }
}
/* Beyond ordinary desktop widths, retain 24 px above the complete grille. */
@media (min-width: 2800px) {
  .hero-photo-frame {
    top: max(calc(48cqh - 27.01435407cqw), calc(24px - 19.73833cqw));
    transform: translateX(-50%);
  }
}

/* EN uses the same narrow-screen photo positioning as the accepted FI hero. */
@media (width < 480px) {
  html[lang="en"] .hero-media {
    --hero-photo-inset: clamp(0px, calc(150px - 31.25vw), 50px);
    --hero-photo-shift: clamp(0px, calc(240px - 50vw), 80px);
  }
}