/* Reference photograph: Alev Takil, Unsplash 7ojyp-IXW7w. */
body .hero {
  background-color: #061127;
  background-image:
    linear-gradient(0deg, rgba(3, 13, 32, .98) 0%, rgba(3, 13, 32, .3) 28%, transparent 65%),
    linear-gradient(90deg, rgba(3, 14, 36, .96) 0%, rgba(3, 14, 36, .84) 28%, rgba(3, 14, 36, .45) 53%, rgba(3, 14, 36, .08) 78%),
    url('../../assets/london-gherkin-hero.jpg');
  background-size: cover;
  /* Keep more sky above the towers on wide laptop and desktop displays. */
  background-position: center 25%;
}
body .hero .hero-orb, body .hero .hero-visual { display: none; }
body .hero > .container { width: min(1680px, calc(100% - 80px)); }
body .hero .hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 780px);
  min-height: 0;
  padding-block: 48px 76px;
  align-content: start;
  gap: 0;
}
body .hero .hero-copy { text-align: left; }
body .hero h1 {
  max-width: 780px;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 700;
  font-size: clamp(60px, 5.5vw, 88px);
  line-height: .98;
  letter-spacing: -.05em;
  margin-inline: 0;
}
body .hero .hero-copy > p {
  max-width: 760px;
  margin: 36px 0 0;
  font-size: 20px;
  line-height: 1.7;
}
body .hero .eyebrow, body .hero .hero-actions, body .hero .hero-proof { justify-content: flex-start; }
body .hero .hero-actions { margin-top: 34px; }
body .hero .hero-metrics { background: transparent; }
body .hero .hero-metrics .hero-benefit { min-height: 132px; }
@media (max-width: 1100px) {
  body .hero .hero-grid { min-height: 0; grid-template-columns: minmax(0, 680px); padding-block: 44px 64px; }
  body .hero h1 { font-size: 68px; }
  body .hero .hero-copy > p { max-width: 630px; font-size: 18px; }
}
@media (max-width: 820px) {
  body .hero {
    background-position: 65% center;
    background-image:
      linear-gradient(0deg, rgba(3, 13, 32, .98), rgba(3, 13, 32, .35) 60%, rgba(3, 13, 32, .4)),
      linear-gradient(90deg, rgba(3, 14, 36, .92), rgba(3, 14, 36, .6)),
      url('../../assets/london-gherkin-hero.jpg');
  }
  body .hero > .container { width: calc(100% - 40px); }
  body .hero .hero-grid { min-height: 0; padding-block: 36px 56px; }
  body .hero h1 { max-width: 640px; font-size: clamp(44px, 8.5vw, 68px); }
  body .hero .hero-copy > p { font-size: 17px; margin-top: 28px; }
}
@media (max-width: 540px) {
  body .hero { background-position: 66% center; }
  body .hero > .container { width: calc(100% - 32px); }
  body .hero .hero-grid { padding-block: 30px; }
  body .hero h1 { font-size: clamp(42px, 10.8vw, 58px); }
  body .hero .eyebrow { font-size: 10px; letter-spacing: .04em; }
  body .hero .hero-copy > p { font-size: 16px; }
  body .hero .hero-actions { align-items: flex-start; }
  body .hero .hero-actions .button-primary { width: auto; }
  body .hero .hero-metrics .hero-benefit { min-height: 120px; }
}