/* Comparison only: photographic background in the opening hero. */
.hero-background {
  background-color: var(--pine);
  background-image: linear-gradient(90deg, #102e2bec 0%, #102e2bdc 37%, #102e2b66 70%, #102e2b22 100%), url('assets/balancing-stones.webp');
  background-size: cover;
  background-position: center 58%;
}
.hero-background .hero { grid-template-columns: minmax(0, 650px) minmax(0, 1fr); gap: 0; min-height: 650px; padding-block: 85px; }
.hero-background .hero-copy { grid-column: 1; }
.hero-background .hero .photo-wrap { display: none; }
.hero-background .hero h1 { color: #fff; }
.hero-background .hero h1 em { color: var(--gold); }
.hero-background .hero-copy > .eyebrow { color: #ecdfbd; }
.hero-background .hero-copy > p:not(.eyebrow) { color: #edf1e9; }
.hero-background .hero-copy .quiet { color: #d9e6dc; }
.hero-background .hero .button { background: var(--paper); border-color: var(--paper); color: var(--pine); }
.hero-background .hero .button:hover { background: #e8eadf; border-color: #e8eadf; }
.hero-background .hero .button.outline { background: transparent; border-color: #b8cbbc; color: #fff; }
.hero-background .hero .button.outline:hover { background: #ffffff1a; border-color: #fff; }
@media (max-width: 900px) {
  .hero-background .hero { grid-template-columns: minmax(0, 560px) minmax(0, 1fr); min-height: 600px; padding-block: 68px; }
  .hero-background .hero .actions { flex-direction: row; align-items: center; }
}
@media (max-width: 600px) {
  .hero-background { background-position: 64% 58%; background-image: linear-gradient(90deg, #102e2be8, #102e2bb3), url('assets/balancing-stones.webp'); }
  .hero-background .hero { grid-template-columns: 1fr; min-height: 540px; padding-block: 55px; }
  .hero-background .hero .actions { align-items: stretch; }
}