/* The supplied photograph contains both cable routes and both landings. */
.hero {
  background: var(--bg);
}
.hero-cartography {
  position: absolute;
  inset: 0;
  display: block;
  overflow: hidden;
  container-type: size;
  pointer-events: none;
}
.hero-cartography .hero-map {
  position: absolute;
  inset: auto;
  left: 74%;
  top: 39%;
  width: 177%;
  width: max(177cqw, 285cqh);
  height: auto;
  max-width: none;
  transform: translate(-53.05%, -32.84%);
}
/* The existing text scrims stop before the cable corridor. */
.hero-shade {
  pointer-events: none;
  background:
    linear-gradient(0deg, var(--bg), rgba(0,6,15,.84) 7%, rgba(0,6,15,.65) 27%, rgba(0,6,15,.46) 37%, transparent 49%),
    linear-gradient(90deg, #010b19ef, #021225bc 23%, #02132767 42%, transparent 60%),
    linear-gradient(180deg, #000915b0, transparent 19%);
}
@media (min-width: 761px) and (max-width: 1100px) {
  .hero-cartography .hero-map {
    width: 260%;
    width: max(260cqw, 302cqh);
    top: 37%;
  }
  .hero-shade {
    background:
      linear-gradient(0deg, var(--bg), rgba(0,6,15,.87) 15%, rgba(0,6,15,.72) 34%, rgba(0,6,15,.46) 43%, transparent 51%),
      linear-gradient(90deg, #010b19ee, #011226af 32%, transparent 60%),
      linear-gradient(180deg, #000915b0, transparent 20%);
  }
}
@media (max-width: 760px) {
  .hero {
    display: flex;
    flex-direction: column;
    min-height: 0;
  }
  .hero-content {
    order: 0;
    padding-bottom: 32px;
  }
  .hero-cartography {
    position: relative;
    inset: auto;
    order: 1;
    flex: none;
    width: 100%;
    height: clamp(270px, 80vw, 355px);
  }
  .hero-cartography .hero-map {
    width: 460%;
    width: max(460cqw, 450cqh);
    left: 50%;
    top: 50%;
    transform: translate(-51.3%, -36.2%);
  }
  .hero-shade {
    display: none;
  }
}
@media (min-width: 520px) and (max-width: 760px) {
  .hero-cartography .hero-map {
    width: 310%;
    width: max(310cqw, 510cqh);
  }
}