/* Shared artwork sources. These are composites, not clean photographic originals.
   WHY mobile crop corresponds to x753,y59,w648,h669 in the 1780x809 artwork.
   A different composition requires reviewing its mobile crop. */
:root {
  --jm-hero-art: url('assets/hero-page1-final.png');
  --jm-why-art: url('assets/why-page2-body.png');
}
@media(min-width:901px) {
  .hero { background-image:var(--jm-hero-art); }
  #why.why { background-image:var(--jm-why-art) !important; }
}
@media(max-width:900px) {
  .hero { display:flex; flex-direction:column; justify-content:flex-end; min-height:100svh; height:auto; background:linear-gradient(180deg,rgba(20,14,9,.06) 15%,rgba(20,14,9,.35) 48%,rgba(20,14,9,.82) 100%),url('assets/hero-photo-clean.png') 51% center/cover no-repeat; }
  .hero > div:first-child { padding:clamp(160px,24svh,240px) 20px 36px; }
  .hero .actions { margin:28px auto 0 !important; }
  #why.why .visual { aspect-ratio:648/669; background-image:var(--jm-why-art); background-size:274.69136% 120.92676%; background-position:66.51943% 42.14286%; background-repeat:no-repeat; }
}