/* Keep the local-network illustration whole: it is part of the header, not a background crop. */
.hero {
  min-height: 670px !important;
  padding-top: 62px !important;
  padding-bottom: 62px;
  display: grid;
  grid-template-columns: minmax(0, .94fr) minmax(0, 1.06fr);
  grid-template-rows: auto auto 1fr;
  column-gap: clamp(42px, 7vw, 118px);
  align-items: start;
}

.hero::before { content: none !important; }

.hero-art {
  grid-column: 1;
  grid-row: 1 / 4;
  align-self: center;
  position: relative !important;
  inset: auto !important;
  width: 100% !important;
  height: min(38vw, 520px) !important;
  margin: 0 !important;
  overflow: hidden !important;
  border: 0 !important;
  background: var(--paper) !important;
  isolation: isolate;
}

.hero-art img {
  position: relative !important;
  inset: auto !important;
  display: block;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center center !important;
  mix-blend-mode: multiply !important;
  filter: none !important;
}

.hero-art::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 34%;
  pointer-events: none;
  background:
    linear-gradient(90deg, var(--paper) 0%, rgba(246, 239, 226, 0) 24%) left bottom / 29% 100% no-repeat,
    linear-gradient(270deg, var(--paper) 0%, rgba(246, 239, 226, 0) 24%) right bottom / 29% 100% no-repeat;
}

.hero > .eyebrow,
.hero > h1,
.hero > .hero-footer { grid-column: 2; }

.hero > .eyebrow { margin-top: 28px; }
.hero h1 { font-size: clamp(62px, 7.2vw, 110px); }
.hero-footer { margin-top: 38px; align-items: flex-start; gap: 24px; }
.hero-footer p { max-width: 350px; }

@media (max-width: 760px) {
  .hero {
    min-height: 0 !important;
    display: block;
    padding-top: 58px !important;
    padding-bottom: 54px;
  }

  .hero > .eyebrow { margin-top: 0; }
  .hero-art { height: auto !important; aspect-ratio: 1859 / 846; margin-top: 44px !important; }
  .hero-art img { object-position: center center !important; }
}