/* Append after fg-gallery-v2-styles. Hero only; copy, photos and timing stay intact. */
#hero .fg-photo-stage {
  position: relative;
  isolation: isolate;
}

#hero .fg-photo-stage .fg-photo-image {
  z-index: 0;
}

/* A feathered lower scrim, not a text panel. Keep the upper portrait clear. */
#hero .fg-photo-stage::after {
  content: "";
  position: absolute;
  inset: 28% 0 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    rgb(0 0 0 / 0) 0%,
    rgb(0 0 0 / .08) 24%,
    rgb(0 0 0 / .38) 64%,
    rgb(0 0 0 / .65) 100%
  );
}

#hero .fg-photo-stage .fg-photo-copy {
  --fg-impact-gutter: clamp(24px, 4vw, 64px);
  inset: 24px max(var(--fg-impact-gutter), env(safe-area-inset-right, 0px))
    calc(96px + env(safe-area-inset-bottom, 0px))
    max(var(--fg-impact-gutter), env(safe-area-inset-left, 0px));
  z-index: 2;
  align-items: flex-start;
  justify-content: flex-end;
  gap: clamp(14px, 1.7vw, 24px);
  text-align: left;
  background: none;
  pointer-events: none;
}

#hero .fg-photo-stage .fg-photo-title {
  width: auto;
  max-width: min(82%, 1120px);
  font-family: inherit;
  font-size: clamp(48px, 8.6vw, 144px);
  font-weight: 800;
  font-style: normal;
  line-height: .98;
  letter-spacing: -.055em;
  color: #fff !important;
  -webkit-text-fill-color: #fff;
  -webkit-text-stroke: 0;
  paint-order: normal;
  text-shadow: 0 2px 20px rgb(0 0 0 / .28);
  white-space: pre-line;
  word-break: normal;
  overflow-wrap: anywhere;
  text-wrap: balance;
}

#hero .fg-photo-stage .fg-photo-subtitle {
  max-width: min(82%, 760px);
  font-family: inherit;
  font-size: clamp(11px, 1vw, 14px);
  font-weight: 600;
  line-height: 1.65;
  letter-spacing: .19em;
  color: #fff !important;
  -webkit-text-fill-color: #fff;
  -webkit-text-stroke: 0;
  text-shadow: 0 1px 10px rgb(0 0 0 / .55);
  white-space: pre-line;
  overflow-wrap: anywhere;
}

/* Preserve the existing control layout and interactions above the scrim. */
#hero .fg-photo-stage .fg-photo-info,
#hero .fg-photo-stage .fg-photo-controls {
  z-index: 3;
}

#hero .fg-photo-stage .fg-photo-copy-in {
  animation: fg-hero-impact-enter 700ms cubic-bezier(.2, .7, .2, 1) both;
}

@keyframes fg-hero-impact-enter {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 768px) {
  #hero .fg-photo-stage .fg-photo-copy {
    --fg-impact-gutter: 20px;
    top: 20px;
    bottom: calc(88px + env(safe-area-inset-bottom, 0px));
    gap: 14px;
  }

  #hero .fg-photo-stage .fg-photo-title {
    max-width: 100%;
    font-size: clamp(46px, 15vw, 78px);
    line-height: 1.02;
    letter-spacing: -.045em;
  }

  #hero .fg-photo-stage .fg-photo-subtitle {
    max-width: 100%;
    font-size: clamp(10px, 2.7vw, 12px);
    line-height: 1.6;
    letter-spacing: .14em;
  }
}

@media (max-height: 540px) and (orientation: landscape) {
  #hero .fg-photo-stage .fg-photo-copy {
    top: 16px;
    bottom: calc(76px + env(safe-area-inset-bottom, 0px));
    gap: 10px;
  }

  #hero .fg-photo-stage .fg-photo-title {
    font-size: clamp(30px, 10svh, 60px);
  }

  #hero .fg-photo-stage .fg-photo-subtitle {
    font-size: 10px;
    letter-spacing: .12em;
  }
}

@media (prefers-reduced-motion: reduce) {
  #hero .fg-photo-stage .fg-photo-copy-in {
    animation: none;
    opacity: 1;
    transform: none;
  }
}