.hero {
  position: relative;
  overflow: hidden;
  min-height: clamp(320px, 46vw, 560px);
  display: flex;
  align-items: flex-end;
  color: var(--color-white);
}
.hero__bg {
  /* Full-bleed across the whole banner width, with a fixed 18% crop off the
     top: the image is shifted up by 18% of the box height and overscanned
     so it still fully covers down to the bottom edge — no letterboxing.
     object-position: bottom anchors the crop so 100% of it comes off the
     top and the bottom of the artwork (e.g. a logo watermark) stays intact —
     "center" would still have shaved a bit off the bottom too. */
  position: absolute;
  top: -18%;
  left: 0;
  width: 100%;
  height: 118%;
  object-fit: cover;
  object-position: center bottom;
  background: var(--color-bg-dark);
  z-index: 0;
}
.hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(9,13,14,0.35) 0%, rgba(9,13,14,0.88) 100%);
  z-index: 1;
}
.hero__inner {
  position: relative;
  z-index: 2;
  padding-block: clamp(2rem, 6vw, 4rem);
  max-width: 46rem;
}
.hero__breadcrumb { margin-block-end: 1rem; }
.hero__rating { margin-block-end: 0.75rem; }
.hero__rating-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: var(--color-accent);
  color: var(--color-white);
  font-weight: var(--fw-btn);
  font-size: 0.85rem;
  padding: 0.4rem 0.9rem;
  clip-path: var(--card-clip);
}
.hero__title { margin-block-end: 1rem; }
.hero__subtitle { color: var(--color-white); opacity: 0.88; max-width: 55ch; margin-block-end: 1.75rem; font-size: 1.05rem; }