/* One coherent illustration: sky above, city in the distance, reception below. */
.hero{height:max(740px,66.6667vw);min-height:0;max-height:none;background:#183867}
.sky{inset:0;background-image:url('assets/city-studio-selected-clean.png');background-position:center;background-size:cover;transform:none!important}
.hero:after{background:linear-gradient(90deg,rgba(10,28,67,.16),transparent 58%);z-index:1}
.hero-copy{top:23%;left:7%;width:37%;text-shadow:0 2px 20px #0f2c5470}
.hero h1{font-size:clamp(42px,4.3vw,67px);letter-spacing:-2px}
.hero-copy p{font-size:16px;line-height:1.8}
.map{left:43%;right:29%;top:12%;height:26%}
.star span{font-size:12px;text-shadow:0 1px 5px #14315b,0 0 12px #14315b}
.star:nth-of-type(3) span{right:auto;left:44px}
.star:nth-of-type(4) span{right:auto;left:44px}
.preview-card{left:44%;top:40%;width:300px}
.preview-card p{font-size:14px}
.preview-card>a{font-size:14px}
.sky-note{bottom:35px;font-size:12px;text-shadow:0 1px 6px #102a4a;line-height:1.8}
.goods{left:65%;top:48%;width:22%;height:40%;right:auto;bottom:auto;max-width:none;padding:0;border:0;background:none;border-radius:25%;backdrop-filter:none;display:block;z-index:5;text-align:center}
.goods:hover{background:transparent}
.goods:focus-visible{outline:2px solid #ffedbe;outline-offset:6px}
.host-label{position:absolute;bottom:2%;left:50%;transform:translateX(-50%);white-space:nowrap;background:#173451e8;border:1px solid #fff9;border-radius:24px;padding:11px 19px;color:#fff8ea;font-size:14px;box-shadow:0 5px 20px #15213822;transition:background .2s,transform .2s}
.host-invite{position:absolute;left:3%;top:5%;transform:translate(-45%,-30%) translateY(6px);background:#fff9edf5;color:#384257;border:1px solid #fff;border-radius:15px 15px 2px 15px;padding:17px 22px;text-align:left;white-space:nowrap;opacity:0;transition:.22s;pointer-events:none;font-size:19px;box-shadow:0 10px 30px #10223e22}
.host-invite small{display:block;font-size:13px;margin-top:6px;color:#746752}
.goods:hover .host-invite,.goods:focus-visible .host-invite{opacity:1;transform:translate(-45%,-30%)}
.goods:hover .host-label,.goods:focus-visible .host-label{background:#41627e;transform:translateX(-50%) translateY(-3px)}
@media(max-width:850px){
 .hero{height:1050px}
 .sky{background-size:auto 100%;background-position:79% center}
 .hero-copy{top:120px;left:7%;width:86%}
 .hero h1{font-size:44px;line-height:1.13}
 .hero-copy p{font-size:15px;max-width:340px}
 .hero-copy p br{display:initial}
 .map{top:350px;left:12%;right:27%;height:150px}
 .star span{font-size:12px}
 .star:nth-of-type(3) span{left:auto;right:40px}
 .star:nth-of-type(4) span{left:auto;right:40px}
 .preview-card{top:500px;left:6%;width:88%;z-index:7}
 .goods{left:38%;top:50%;width:57%;height:36%;max-width:none;bottom:auto;right:auto}
 .host-invite{left:5%;top:6%;font-size:17px;padding:13px 15px;transform:translate(-20%,-40%)}
 .goods:hover .host-invite,.goods:focus-visible .host-invite{transform:translate(-20%,-45%)}
 .host-label{bottom:0;font-size:14px}
 .sky-note{max-width:85%;bottom:22px;left:7%;font-size:12px}
}
@media(max-width:520px){
 .hero h1{font-size:clamp(32px,9vw,43px)}
 .hero-copy{top:108px}
 .hero-copy p{font-size:14px;line-height:1.7}
 .map{top:340px;height:145px;right:28%}
 .star span{font-size:11px}
 .hero-copy .button{margin-top:5px;padding:11px 17px}
}
@media(prefers-reduced-motion:reduce){.host-invite,.host-label{transition:none}}
.hero-host{position:absolute;left:65%;top:48%;width:22%;height:40%;z-index:5;border:0;border-radius:35%;padding:0;background:transparent;cursor:pointer}
.hero-host:focus-visible{outline:2px solid #ffedbe;outline-offset:5px}
.host-greeting{position:absolute;left:43%;top:50%;z-index:4;margin:0;color:#fff4db;font-size:clamp(17px,1.7vw,29px);font-weight:300;line-height:1.2;text-shadow:0 2px 16px #0b234ecc;opacity:0;visibility:hidden;transform:translateY(5px);pointer-events:none;transition:opacity .25s ease,transform .25s ease,visibility .25s}
.host-greeting span{display:block;font-size:1.35em;letter-spacing:-.035em}
.host-greeting.is-visible{opacity:1;visibility:visible;transform:none}
@media(max-width:850px){.hero-host{left:38%;top:50%;width:57%;height:36%}.host-greeting{left:8%;top:74%;font-size:21px}}
@media(max-width:520px){.host-greeting{top:81%;font-size:18px}}
@media(prefers-reduced-motion:reduce){.host-greeting{transition:none;transform:none}}