/* Ver.67: transparent Cutalche Last Live branding inside existing hero. No extra section height. */
main {position:relative;}
.hero-inline-logo {
  position:absolute;
  z-index:31;
  top:clamp(86px,7.2vw,115px);
  left:50%;
  transform:translateX(-50%);
  width:min(32vw,410px);
  min-width:270px;
  pointer-events:none;
  display:flex;
  justify-content:center;
  align-items:center;
  isolation:isolate;
}
.hero-inline-logo::before {
  content:"";
  position:absolute;
  z-index:-1;
  inset:4% -8%;
  border-radius:50%;
  background:radial-gradient(ellipse at center,rgba(44,10,70,.60),rgba(47,12,73,.20) 55%,transparent 74%);
  filter:blur(12px);
  pointer-events:none;
}
.hero-inline-logo img {
  display:block;
  width:100%;
  height:auto;
  object-fit:contain;
  filter:drop-shadow(0 2px 7px rgba(225,35,132,.45)) drop-shadow(0 0 8px rgba(251,121,205,.24));
}
@media(max-width:800px) {
  .hero-inline-logo {top:75px;width:min(65vw,360px);min-width:0}
}
@media(max-width:580px) {
  .hero-inline-logo {top:73px;width:78vw;min-width:0;max-width:348px;}
  .hero-inline-logo::before {inset:0 -7%;filter:blur(10px);}
  /* Provide a small open area for the transparent logo above the members' faces. */
  .hero .hero-illustration {background-position:center 148px;}
}
@media(max-width:365px){
  .hero-inline-logo {top:71px;width:78vw;}
  .hero .hero-illustration {background-position:center 136px;}
}