/* Full-bleed arc hero shared by QJP, BYI, 3IAT, and DYG.
   The scene keeps its original virtual height. Cropping its top edge moves
   image and copy together without changing their relative composition. */
.arc-banner {
  overflow: hidden;
  background: var(--night);
}
.arc-banner-scene {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: flex-end;
  box-sizing: border-box;
  min-height: var(--arc-hero-scene-height, min(58vw, 640px));
  margin-top: calc(-1 * var(--arc-hero-crop, min(13vw, 165px)));
  overflow: hidden;
  border-bottom: 1px solid var(--line-hi);
}
.arc-banner-image,
.arc-banner-shade {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.arc-banner-image {
  z-index: -2;
  display: block;
  object-fit: cover;
  object-position: var(--arc-hero-position, center 56%);
}
.arc-banner-shade {
  z-index: -1;
  background: linear-gradient(0deg, var(--void) 0%, rgba(0,8,16,.88) 12%, rgba(0,8,16,.4) 46%, transparent 73%);
}
.arc-banner-content {
  padding-top: 5rem;
  padding-bottom: 3.6rem;
}
.arc-banner-content h1,
.arc-banner-content h2 {
  max-width: 18ch;
  margin: 0 0 .4rem;
  color: var(--ink);
  font-size: clamp(2.65rem, 5.2vw, 5.1rem);
  line-height: 1.05;
  text-shadow: 0 3px 26px rgba(0,8,16,.8);
  text-wrap: balance;
}
.arc-banner-content > p:last-child {
  max-width: 57ch;
  margin: 1rem 0 0;
  color: var(--ink);
  font-size: clamp(1rem, 1.4vw, 1.17rem);
  line-height: 1.7;
  text-shadow: 0 2px 12px var(--void);
}
.arc-banner .eyebrow { color: var(--gold-soft); }

@media (max-width: 640px) {
  .arc-banner-scene {
    display: block;
    min-height: 0;
    margin-top: 0;
  }
  .arc-banner-image {
    position: relative;
    height: auto;
    aspect-ratio: 16 / 9;
    object-position: center;
  }
  .arc-banner-shade { display: none; }
  .arc-banner-content {
    padding-top: 1.5rem;
    padding-bottom: 2rem;
  }
  .arc-banner-content h1,
  .arc-banner-content h2 { font-size: clamp(2.25rem, 9vw, 3.1rem); }
  .arc-banner-content > p:last-child { margin-top: .7rem; }
}
@media (max-width: 400px) {
  .arc-banner-content h1,
  .arc-banner-content h2 { font-size: 2.1rem; }
}