.journey-hero { position: relative; isolation: isolate; display: flex; align-items: center; min-height: calc(100vh - var(--header-height)); padding-block: 3rem; margin-bottom: 1.5rem; }
.journey-hero::before { position: absolute; z-index: -1; inset: 0 calc(50% - 50vw); content: ""; background: linear-gradient(90deg, rgba(2, 5, 19, 1) 0%, rgba(2, 5, 19, 0.98) 35%, rgba(2, 5, 19, 0.82) 48%, rgba(2, 5, 19, 0.18) 72%), linear-gradient(0deg, var(--color-bg), transparent 22%), url('/assets/images/journey/report-hero.webp') right center / cover no-repeat; }
.journey-hero__copy { width: min(51%, 43rem); }
.journey-hero__eyebrow { margin: 0 0 0.9rem; color: var(--color-violet-bright); font-size: 0.75rem; font-weight: 900; letter-spacing: 0.12em; }
.journey-hero__title { margin: 0 0 1.2rem; font-size: clamp(2.35rem, 3.6vw, 3.8rem); line-height: 1.08; letter-spacing: -0.035em; text-wrap: balance; }
.journey-hero__description { margin: 0; max-width: 34rem; color: #e6e0ef; font-size: 1rem; line-height: 1.65; }
.journey-hero__boundary { display: flex; align-items: center; gap: 0.6rem; margin: 1.25rem 0 0; color: #d8d3e4; font-size: 0.75rem; line-height: 1.5; }
.journey-hero__boundary > i { color: var(--color-violet-bright); }
/* At tablet widths the artwork follows copy; its original right-hand focal point stays visible. */
@media (max-width: 72rem) {
  .journey-hero { display: block; min-height: 0; padding-block: 2.5rem 15rem; }
  .journey-hero::before { top: auto; height: 16rem; background-size: auto, auto, auto 100%; background-position: center, center, right center; mask-image: linear-gradient(to bottom, transparent, #000 20%, #000 90%, transparent); }
  .journey-hero__copy { width: 100%; max-width: 42rem; }
  .journey-hero__description { max-width: 40rem; }
}
@media (max-width: 47.5rem) {
  .journey-hero { padding-top: 2rem; padding-bottom: 12rem; }
  .journey-hero::before { height: 12rem; }
  .journey-hero__title { font-size: 2.35rem; }
  .journey-hero__description { font-size: 0.95rem; }
}