/* Keep the established composition. Reserve actual room for the mobile caption. */
.hero-footer { display: contents; }
.hero-content h1 { overflow-wrap: break-word; }
.eyebrow > span:first-child { line-height: 1.5; }
.static-story { overflow-wrap: anywhere; }
@media (max-width: 680px) {
  .hero-footer {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 14px;
    padding: 18px var(--gutter) 22px;
    z-index: 5;
    width: 100%;
    position: relative;
  }
  .hero-footer[hidden] { display: none; }
  .hero-footer .photo-caption {
    position: static;
    grid-column: 1;
    grid-row: 1;
    max-width: none;
    width: 100%;
    min-width: 0;
    text-align: left;
    font-size: 9px;
    line-height: 1.6;
    overflow-wrap: anywhere;
    padding: 0;
  }
  .hero-footer .scene-navigation {
    position: static;
    grid-column: 2;
    grid-row: 1;
    align-self: end;
    gap: 7px;
    margin: 0;
  }
  .hero-footer .scene-navigation .icon-btn { width: 44px; height: 44px; }
  .hero-content { padding-bottom: 14px; }
  .hero-cta { flex-wrap: wrap; }
  .eyebrow { flex-wrap: wrap; gap: 8px; }
  .media-error { bottom: 100px; }
}
@media (max-width: 380px) {
  .hero-footer { gap: 10px; }
  .hero-footer .scene-navigation .icon-btn { width: 44px; height: 44px; }
}
@media (min-width: 681px) {
  .hero-footer {
    display: flex;
    position: absolute;
    right: var(--gutter);
    bottom: 23px;
    gap: 18px;
    align-items: flex-end;
    max-width: min(540px, 45%);
    z-index: 5;
  }
  .hero-footer[hidden] { display: none; }
  .hero-footer .photo-caption {
    position: static;
    order: 0;
    min-width: 0;
    max-width: 340px;
    line-height: 1.6;
  }
  .hero-footer .scene-navigation { position: static; order: 1; flex-shrink: 0; }
}