/* The original photo fills the first screen; only its lower edge is curved. */
.hero{
  position:relative;
  isolation:isolate;
  width:100%;
  height:100vh;
  height:100svh;
  max-height:none;
  overflow:hidden;
  /* Full-HD curve: 172.8px depth at 1920px width, with the same ratio on phones. */
  border-radius:0 0 50% 50% / 0 0 9vw 9vw;
  background:#83909b;
}
.hero picture{position:absolute;inset:0;display:block}
.hero::after{display:none}
.hero-photo{
  position:absolute;
  inset:0;
  display:block;
  width:100%;
  height:100%;
  max-width:none;
  margin:0;
  object-fit:cover;
  object-position:50% 50%;
  transform:scale(1.55);
  transform-origin:50% 100%;
  filter:brightness(.84);
}
.hero h1{
  position:absolute;
  inset:0;
  height:100%;
  z-index:1;
  margin:0;
  display:block;
  color:#fff;
  font-size:7.8vw;
  font-size:min(7.8vw,13svh);
  font-weight:700;
  line-height:1;
  letter-spacing:0;
}
.hero h1 span{position:absolute;margin:0!important;white-space:nowrap;transform-origin:left center}
.hero h1 span:nth-child(1){left:5.588%;top:21.1%}
.hero h1 span:nth-child(2){left:12.573%;top:32.32%}
.hero h1 span:nth-child(3){left:59.662%;top:62.45%}
.hero h1 span:nth-child(4){left:66.414%;top:73.67%}

@media(max-width:760px){
  .hero h1{font-size:21.4vw;font-size:min(21.4vw,9.84svh)}
  .hero h1 span:nth-child(1){left:1.493%;top:22%}
  .hero h1 span:nth-child(2){left:12.687%;top:31%}
  .hero h1 span:nth-child(3){left:auto;right:20.647%;top:71%}
  .hero h1 span:nth-child(4){left:auto;right:0;top:79.5%}
}
@media(max-height:600px){
  .page-home .header{top:20px}
}
@media(min-width:761px) and (max-height:600px){
  .hero h1 span:nth-child(1){top:24%}
  .hero h1 span:nth-child(2){top:36%}
  .hero h1 span:nth-child(3){top:63%}
  .hero h1 span:nth-child(4){top:77%}
}
@media(min-width:761px) and (max-height:600px) and (min-aspect-ratio:2/1){
  .hero h1 span:nth-child(3){top:auto;bottom:calc(9vw + 15svh)}
  .hero h1 span:nth-child(4){top:auto;bottom:9vw}
}