/* FE•ŪLD /how-it-works journey hero restoration.
   Founder-approved placement mirrors /our-coaching:
   header -> intro copy -> wide editorial image in the same hero section.
   The image is illustrative only; the real seven-stage journey remains
   semantic live text immediately below it. */

.how-it-works .hiw-hero {
  max-width: 1180px;
}

.how-it-works .hiw-hero-copy {
  max-width: min(760px, 100%);
  margin-inline: auto;
}

/* Same vertical slot and gutter expansion used by .coaching-hero-media.
   This is a REAL <img> element bundled by Vite. The complete artwork
   stays visible and is never cover-cropped because its title and stage
   labels are part of the image.

   IMPORTANT: the page's shared fadeUp motion primitive starts elements at
   opacity: 0. This hero is primary content and must never depend on an
   IntersectionObserver firing before it becomes visible, so visibility
   and transform are deliberately locked here.

   The rounded surface now matches the Coaching hero exactly by using the
   same shared photo-well radius token and clipping treatment. */
.how-it-works .hiw-hero-media {
  margin: clamp(32px, 5vw, 72px) 0 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  opacity: 1 !important;
  transform: none !important;
  visibility: visible !important;
}

.how-it-works .hiw-hero-media img {
  display: block !important;
  width: 100%;
  max-width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: contain;
  object-position: center;
  opacity: 1 !important;
  visibility: visible !important;
}

@media (min-width: 561px) {
  .how-it-works .hiw-hero-media {
    margin-inline: calc(var(--landing-gutter) * -1);
  }
}

@media (max-width: 560px) {
  .how-it-works .hiw-hero-media {
    margin-top: clamp(24px, 7vw, 36px);
  }
}