/* Three complete photographic compositions, selected by <picture>. */
.hero { height: clamp(660px, 48vw, 840px); min-height: 660px; background: #191b1c; isolation: isolate; }
.hero-art { position: absolute; inset: 0; display: block; z-index: -2; }
.hero-art img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.hero-overlay { z-index: -1; pointer-events: none; background: linear-gradient(90deg, rgba(19,21,23,.46), rgba(19,21,23,.12) 48%, transparent 64%); }
.hero-content { padding-top: clamp(170px, 13vw, 230px); }
.hero h1 { max-width: 53%; font-size: clamp(40px, 4.4vw, 68px); line-height: 1.08; }
.hero-copy { max-width: 45%; }
.hero-actions { max-width: 53%; gap: 24px; flex-wrap: wrap; }
.hero-bottom { z-index: 1; }

@media (min-width: 1800px) {
  .hero { height: clamp(760px, 35vw, 980px); }
  .hero-content, .hero-bottom { width: min(1520px, calc(100% - 160px)); }
  .hero h1 { max-width: 740px; font-size: 76px; }
  .hero-copy { max-width: 590px; }
  .hero-content { padding-top: 215px; }
}
@media (min-width: 768px) and (max-width: 1100px) {
  .hero-content { padding-top: 160px; }
  .hero h1 { max-width: 48%; font-size: clamp(36px, 4.1vw, 45px); }
  .hero-copy { max-width: 45%; font-size: 15px; }
  .hero-actions { max-width: 46%; gap: 22px; flex-direction: column; align-items: flex-start; }
  .hero .eyebrow { max-width: 46%; line-height: 1.5; }
}
@media (max-width: 767px) {
  .hero { display: flex; flex-direction: column; height: auto; min-height: 0; }
  .hero-content { order: 0; padding-top: 118px; padding-bottom: 30px; width: calc(100% - 42px); margin: 0 auto; }
  .hero .eyebrow { font-size: 10px; line-height: 1.5; margin-bottom: 18px; }
  .hero h1 { max-width: 540px; font-size: clamp(34px, 8.7vw, 50px); margin-bottom: 20px; }
  .hero-copy { max-width: 540px; font-size: 15px; margin-bottom: 0; }
  .hero-actions { max-width: none; margin-top: 25px; gap: 22px; }
  .hero-art { order: 1; position: relative; inset: auto; z-index: 0; width: 100%; aspect-ratio: 4 / 5; margin-top: -1px; }
  .hero-art img { object-fit: cover; object-position: center top; }
  .hero-art::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, #191b1c, transparent 13%); }
  .hero-overlay, .hero-bottom { display: none; }
}