/* V4: the photograph covers the hero itself on every screen size. */
.hero{position:relative;isolation:isolate;overflow:hidden}
.hero-photo{position:absolute;inset:0;z-index:-3;display:block;width:100%;height:100%;overflow:hidden}
.hero-photo img{display:block;width:100%;height:100%;object-fit:cover}
.hero-photo::after{content:none}
.hero-shade{display:block;position:absolute;inset:0;z-index:-2;background:linear-gradient(90deg,rgba(34,33,30,.77),rgba(34,33,30,.70) 50%,rgba(34,33,30,.73)),linear-gradient(0deg,rgba(22,21,18,.26),transparent 70%)}
@media(max-width:900px){
  .hero-photo img{object-position:50% 0;animation:none}
  /* The upper image shows the group; the copy starts below their faces. */
  .hero-shade{background:linear-gradient(180deg,rgba(34,33,30,.20) 0,rgba(34,33,30,.26) 200px,rgba(34,33,30,.75) 310px,rgba(34,33,30,.85) 65%,rgba(34,33,30,.91) 100%)}
  .hero-content{padding-top:340px;padding-bottom:26px;background:none}
  .hero .eyebrow{font-size:10px;line-height:1.8}
  .hero h1{margin-top:21px;line-height:1.12}
  .hero .community-highlight{margin-top:13px;padding:7px 13px 8px}
  .hero-description{margin-top:24px;font-size:16px;line-height:1.8;max-width:570px}
  .hero-actions{margin-top:26px;gap:18px}
  .hero-actions>.button{min-height:60px;font-size:15px}
  .hero-price{margin-top:13px;font-size:12px;line-height:1.8}
  .hero-facts{margin-top:26px}
  .hero-facts>div{padding:16px 15px;font-size:11px}
  .hero-facts strong{font-size:12px}
  .motion-toggle{min-height:44px;font-size:11px}
  .hero-image-note{font-size:10px;margin-bottom:18px}
}
@media(max-width:480px){
  .hero-content{padding-top:365px;padding-bottom:24px}
  .hero .eyebrow{font-size:9px;max-width:34ch;line-height:1.8}
  .hero h1{font-size:32px;line-height:1.14;margin-top:20px}
  .hero h1 em{font-size:1.05em;line-height:1.14}
  .hero .community-highlight{font-size:25px;padding:7px 12px 8px;margin-top:12px}
  .hero-description{font-size:15px;line-height:1.8;max-width:34ch;margin-top:24px}
  .hero-actions{gap:10px;margin-top:26px}
  .hero-actions>.button{min-height:60px;font-size:15px}
  .hero-actions>.text-link{min-height:44px;font-size:12px;gap:15px}
  .hero-price{font-size:11px;line-height:1.8;margin-top:12px}
  .hero-facts{grid-template-columns:1fr;margin-top:24px;text-align:left}
  .hero-facts>div{justify-content:flex-start;gap:14px;padding:12px 15px;font-size:10px;border-left:0;border-top:1px solid #d4a15c33}
  .hero-facts>div:first-child{border-top:0}
  .hero-facts strong{font-size:11px;line-height:1.55;margin-bottom:3px}
  .hero-facts .fact-detail{display:block;font-size:10px;line-height:1.7}
  .hero-facts .icon,.hero-facts .zero-sign{display:block;width:20px;height:20px;font-size:21px;flex:none}
  .motion-toggle{font-size:11px;min-height:44px}
  .hero-image-note{font-size:10px;line-height:1.7;margin-bottom:18px}
}
@media(max-width:360px){
  .hero h1{font-size:30px}
  .hero .community-highlight{font-size:23px}
  .hero-description{font-size:15px}
}