/* V6 preserves the red identity while repairing the specified sections. */

.hero-cutout {
  animation: portrait-float-v6 7.5s ease-in-out infinite;
  backface-visibility: hidden;
  will-change: transform;
}
@keyframes portrait-float-v6 {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50% { transform: translate3d(-5px, -10px, 0); }
}

.opportunity-v4-heading {
  display: block;
  max-width: 1000px;
  margin-bottom: clamp(38px, 5vw, 62px);
}
.opportunity-format-label {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  margin-bottom: 22px;
  padding: 6px 13px;
  border: 1px solid rgba(255, 226, 167, .52);
  border-radius: 999px;
  background: rgba(255, 255, 255, .09);
  color: #ffe0a0;
  font-size: 11px;
  letter-spacing: .14em;
}
.opportunity-v4-heading h2 {
  max-width: none;
  margin: 0 0 17px;
  font-size: clamp(54px, 6.4vw, 94px);
  line-height: .99;
  letter-spacing: -.045em;
}
.opportunity-v4-heading > p {
  max-width: 750px;
  margin: 0;
  color: rgba(255, 255, 255, .86);
  font-size: clamp(17px, 1.6vw, 22px);
  line-height: 1.5;
}
.route-stage h3 { min-height: 78px; }

/* One image treatment for real, varied people: similar height, warm natural tone. */
.persona-photo {
  height: clamp(185px, 16vw, 235px);
  filter: saturate(.84) contrast(.97) sepia(.06);
}
.persona-photo--home { object-position: center 37%; }
.persona-photo--job { object-position: center 39%; }
.persona-photo--student { object-position: center 41%; }
.persona-photo--freelance { object-position: center 39%; }
.persona-photo--zero { object-position: center 47%; }

/* The circular glow belongs to the entire offer, so it fades towards the left. */
.offer-poster { min-height: 665px; isolation: isolate; }
.offer-poster::after {
  content: '';
  position: absolute;
  z-index: 0;
  inset: -100px -50px;
  pointer-events: none;
  background: repeating-radial-gradient(circle at 78% 53%, transparent 0 86px, rgba(255, 222, 159, .09) 87px 88px, transparent 89px 150px), radial-gradient(circle at 78% 53%, rgba(255, 194, 112, .13), transparent 54%);
  -webkit-mask-image: linear-gradient(90deg, transparent 3%, rgba(0, 0, 0, .14) 26%, #000 70%);
  mask-image: linear-gradient(90deg, transparent 3%, rgba(0, 0, 0, .14) 26%, #000 70%);
}
.offer-poster-copy, .offer-poster-art { position: relative; z-index: 1; }
.offer-poster-art { overflow: visible; }
.offer-poster-art::before { display: none; }
.hourglass-stage { position: relative; width: min(94%, 450px); aspect-ratio: 2 / 3; margin: auto; }
.hourglass-stage img { display: block; width: 100%; height: 100%; max-height: none; object-fit: contain; filter: drop-shadow(0 30px 30px rgba(30, 4, 13, .35)); }
.hourglass-sand { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; }

@media (max-width: 1100px) {
  .offer-poster { min-height: 620px; }
  .hourglass-stage { width: min(94%, 390px); }
}
@media (max-width: 820px) {
  .opportunity-v4-heading h2 { font-size: clamp(51px, 8vw, 76px); }
  .route-stage h3 { min-height: auto; }
  .offer-poster { min-height: 0; }
  .offer-poster-art { min-height: 430px; }
  .hourglass-stage { width: min(72%, 280px); }
}
@media (max-width: 560px) {
  .opportunity-v4-heading h2 { font-size: clamp(46px, 12vw, 62px); }
  .opportunity-v4-heading > p { font-size: 17px; }
  .offer-poster-art { min-height: 345px; }
  .hourglass-stage { width: min(65%, 230px); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-cutout { animation: none; }
}
