.hero {
  position: relative;
  display: block;
  min-height: min(790px, calc(100svh - 86px));
  overflow: hidden;
  background: #172643;
  color: #fff;
  padding: 0;
}

.hero-photo,
.hero-shade {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.hero-photo {
  object-fit: cover;
  object-position: center 46%;
}

.hero-shade {
  background: linear-gradient(90deg, rgba(15, 27, 47, .94) 0%, rgba(15, 27, 47, .81) 22%, rgba(15, 27, 47, .38) 43%, rgba(15, 27, 47, 0) 65%);
}

.hero-inner {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  min-height: inherit;
  width: 100%;
  padding-top: 58px;
  padding-bottom: 68px;
}

.hero-copy {
  width: min(530px, 41vw);
  text-shadow: 0 2px 16px rgba(9, 20, 35, .27);
}

.hero .eyebrow,
.hero .lead,
.hero .caption {
  color: #f1f3f4;
}

.hero .rule { border-color: #d9ad80; }
.hero h1 { font-size: clamp(50px, 4.7vw, 76px); margin: 24px 0; }
.hero h1 em { color: #e3b48b; }
.hero .lead { font-size: 18px; line-height: 1.65; }
.hero .text-link { color: #fff; }
.hero .text-link:hover { color: #e3b48b; }
.hero .button.primary { background: #fff; color: var(--blue); }
.hero .button.primary:hover { background: #e9edf2; color: var(--ink); }
.hero .caption { max-width: 440px; font-size: 11px; opacity: .82; }

.hero-framework { padding-top: 28px; padding-bottom: 55px; }
.hero-card { transform: none; padding: 24px 28px; box-shadow: 0 14px 40px #1726430c; }
.hero-card .card-head { padding-bottom: 14px; }
.hero-card .step { display: inline-grid; width: 24%; vertical-align: top; padding: 22px 12px 12px 0; border-bottom: 0; }
.hero-card .step + .step { border-left: 1px solid var(--line); padding-left: 18px; }
.hero-card .card-foot { justify-content: flex-end; padding-top: 10px; }

@media (max-width: 900px) {
  .hero { min-height: 690px; }
  .hero-copy { width: min(500px, 58vw); }
  .hero-shade { background: linear-gradient(90deg, rgba(15, 27, 47, .95), rgba(15, 27, 47, .72) 43%, rgba(15, 27, 47, .14) 90%); }
  .hero-card .step { width: 49%; }
  .hero-card .step:nth-child(4) { border-left: 0; padding-left: 0; }
}

@media (max-width: 700px) {
  .hero { min-height: 770px; }
  .hero-photo { height: 300px; object-position: 56% center; }
  .hero-shade { background: linear-gradient(0deg, #172643 9%, rgba(23, 38, 67, .97) 36%, rgba(23, 38, 67, 0) 70%); }
  .hero-inner { display: block; padding-top: 288px; padding-bottom: 38px; }
  .hero-copy { width: 100%; text-shadow: none; }
  .hero h1 { font-size: clamp(43px, 9.2vw, 58px); margin: 14px 0; }
  .hero .lead { font-size: 16px; line-height: 1.55; }
  .hero-actions { gap: 14px; margin-top: 20px; }
  .hero .caption { margin-top: 17px; }
  .hero-framework { padding-top: 16px; padding-bottom: 34px; }
  .hero-card { margin: 0; padding: 22px; }
  .hero-card .step { width: 100%; display: grid; padding: 16px 0; border-bottom: 1px solid var(--line); }
  .hero-card .step + .step, .hero-card .step:nth-child(4) { border-left: 0; padding-left: 0; }
  .hero-card .card-foot { padding-top: 18px; }
}