/* The photo, rather than the former cut-out illustration, fills the hero. */
.hero{min-height:88vh;background:#F7F4EF url("/images/hero.jpg") left center / cover no-repeat}
.hero-inner{display:flex;justify-content:flex-end;min-height:88vh;align-items:center;padding:145px var(--pad) 70px}
.hero-text{width:min(46%,580px);margin-left:auto}
.hero-photo{display:none}
.pair .ph.tall{background:none;border:0;aspect-ratio:3/4;overflow:hidden}
.pair .ph.tall::before{display:none}
.pair .ph.tall img{width:100%;height:100%;object-fit:cover;display:block}
.kit-photo{aspect-ratio:auto}
.kit-photo img{width:100%;height:auto;object-fit:contain}
@media(min-width:1024px){
  /* Clear the fixed desktop navigation so the top of the photo stays visible. */
  .hero{min-height:0;margin-top:78px;background-position:left top}
  .hero-inner{min-height:0;max-width:none;justify-content:flex-start}
  .hero-text{width:calc(40% - min(1vw,16px));max-width:540px;margin-left:calc(60% + min(1vw,16px))}
}
@media(min-width:1024px) and (max-width:1279px){
  /* A tall cover image would otherwise enlarge the phone into the 60% text column. */
  .hero-inner{padding-top:8px;padding-bottom:8px}
}
@media(min-width:881px){
  .kit-wrap{grid-template-columns:minmax(0,480px) minmax(0,1fr);gap:64px;align-items:start}
  .kit-photo{width:100%;max-width:480px}
  .kit-list{padding-left:0}
  .kit-item:first-child{padding-top:0}
  .kit-swirl{display:none}
}
@media(max-width:767px){
  .hero{display:block;min-height:0;background:#F7F4EF;padding-top:72px}
  .hero-inner{display:flex;flex-direction:column;min-height:0;padding:0;gap:0}
  .hero-photo{display:block;order:0;width:100%;min-height:0;aspect-ratio:16/9;overflow:hidden}
  .hero-photo img{width:100%;height:100%;max-height:none;max-width:none;object-fit:cover;object-position:left center;filter:none}
  .hero-text{order:1;width:100%;margin:0;padding:32px var(--pad) 48px}
}