/* Home hero, renders first. The right half of the screen is one in game render at full
   height, two of them taking turns; the copy on the left is a headline and one line.
   Everything the old hero said in paragraphs now sits in the band under it. */
.hero.renders{display:block;position:relative;overflow:hidden;min-height:clamp(520px,42vw,660px);
  background:radial-gradient(120% 100% at 30% 50%,#151a24 0%,#0B0F16 60%)}
.hero.renders::after{display:none}
.renderwall{position:absolute;top:0;bottom:0;left:40%;right:0;z-index:0}
.renderwall img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;
  max-width:none;display:block;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.35) 10%,#000 32%);
          mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.35) 10%,#000 32%)}
.renderwall .r2{opacity:0;animation:renderfade 14s ease-in-out infinite}
@keyframes renderfade{0%,42%{opacity:0}50%,92%{opacity:1}100%{opacity:0}}
/* the picture melts into the dark on its left edge (a mask on the image itself), so the copy never touches a hard seam */
.renderwall::after{content:"";position:absolute;left:0;right:0;bottom:0;height:34%;z-index:2;pointer-events:none;
  background:linear-gradient(180deg,rgba(11,15,22,0),rgba(11,15,22,.35))}
.hero.renders .wrap{position:relative;z-index:3;padding-top:clamp(40px,6vw,80px);padding-bottom:clamp(40px,6vw,80px)}
.hero.renders .herogrid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(20px,3vw,52px);
  align-items:center;min-height:clamp(520px,42vw,660px)}
.hero.renders .herocopy{max-width:540px}
.hero.renders h1{font-family:var(--shout);font-size:clamp(36px,4.1vw,64px);line-height:.98;text-shadow:0 6px 0 rgba(0,0,0,.3)}
.hero.renders .sub{font-family:var(--body);font-weight:600;text-transform:none;letter-spacing:0;
  font-size:clamp(17px,1.6vw,22px);line-height:1.45;color:rgba(255,255,255,.88);margin-top:20px;text-shadow:none}
html.js .hero.renders .sub{animation-delay:.08s}
html.js .hero.renders .btnrow{animation-delay:.16s}
.hero.renders .btnrow>.btn{flex:0 0 auto}
.kicker.dark{background:#FFF3D2;border:1px solid #F5D98A;color:#7A5A12;margin-bottom:10px}
@media (max-width:900px){
  .hero.renders{min-height:0}
  .renderwall{position:relative;left:0;right:auto;width:100%;aspect-ratio:16/9;min-height:240px;max-height:56vh}
  .renderwall img{-webkit-mask-image:linear-gradient(180deg,#000 55%,transparent 100%);mask-image:linear-gradient(180deg,#000 55%,transparent 100%)}
  .renderwall::after{display:none}
  .hero.renders .wrap{padding-top:10px;padding-bottom:34px}
  .hero.renders .herogrid{grid-template-columns:1fr;min-height:0;gap:0}
  .hero.renders .herocopy{max-width:none;margin-top:-28px}
  .renderside{display:none}
  .hero.renders .btnrow>.btn{flex:1 1 100%}
}