/* Keep the painted assets and their framing intact. */
.hero-titles{padding-top:108px}
.hero-titles .hero-under-title{display:flex;flex-direction:column;align-items:center;gap:7px;margin:14px auto 0;padding:0;max-width:700px;text-align:center}
.hero-titles .hero-under-title p,.chinese .hero-titles .hero-under-title p{font-size:clamp(23px,2.1vw,30px);font-weight:600;line-height:1.3;max-width:none;color:#592e3b;text-wrap:balance;text-shadow:0 1px 3px #fff6e8,0 0 15px #fff6e8b3}
.hero-titles .hero-under-title>span{display:block;margin:0;font-size:11px;letter-spacing:.14em;color:#193c55;text-shadow:0 1px 6px #fff6e8}
.is-night .hero-under-title p,.is-night .hero-under-title>span,.chinese .is-night .hero-under-title p{color:#fff7e8;text-shadow:0 1px 3px #112c44,0 0 14px #112c44}
@media(min-width:561px){.hero-titles h1{font-size:clamp(100px,14vw,205px);margin-top:12px}}
.hero-bottom{gap:14px;color:#193c55;text-shadow:none;align-items:center}
.hero-bottom>.journey-link,.hero-bottom>.motion-control,.hero-bottom>.ripple-control{display:flex;align-items:center;justify-content:center;gap:9px;min-height:44px;padding:9px 13px;border:1px solid #193c5526;border-radius:3px;background:#fff7e8f2;font:500 12px/1.25 var(--sans);color:#193c55}
.hero-bottom .scroll-stem{display:none}
.ripple-control>svg{width:22px;height:17px;flex:none}
.ripple-control:disabled{opacity:.62;cursor:default}
.hero-water-glint{top:var(--water-top,82%);height:calc(100% - var(--water-top,82%));opacity:.5;transform:none;background:linear-gradient(105deg,transparent 15%,#fff3c933 48%,transparent 78%);mask-image:linear-gradient(transparent,#000 45%,transparent);animation:harbourLight 18s ease-in-out infinite alternate}
.hero-ferry{left:52%;bottom:var(--ferry-bottom,10%);width:clamp(85px,9vw,125px);animation:harbourFerry 24s ease-in-out infinite alternate}
.hero-world.motion-inactive .hero-ferry,.hero-world.motion-inactive .hero-water-glint{animation-play-state:paused}
.hero-world.no-visible-water .hero-ferry,.hero-world.no-visible-water .hero-water-glint,.hero-world.no-visible-water .ripple-control{display:none}
@keyframes harbourLight{from{transform:translateX(-3%);opacity:.25}to{transform:translateX(3%);opacity:.55}}
@keyframes harbourFerry{from{transform:translateX(-50%) translateY(0) rotate(-.5deg)}to{transform:translateX(calc(-50% + 32px)) translateY(-2px) rotate(.5deg)}}
@media(max-width:800px){.hero-titles{padding-top:108px}.hero-bottom{gap:10px}.hero-bottom>.journey-link,.hero-bottom>.motion-control,.hero-bottom>.ripple-control{font-size:11px;padding-inline:10px}}
@media(max-width:560px){
 .hero-titles{padding-top:110px}
 .hero-titles .hero-under-title{gap:7px;max-width:340px;margin-top:15px}
 .hero-titles .hero-under-title p,.chinese .hero-titles .hero-under-title p{font-size:23px;line-height:1.3;max-width:320px}
 .hero-titles .hero-under-title>span{font-size:10px;letter-spacing:.11em}
 .hero-titles h1,.chinese .hero-titles h1{margin-top:15px}
 .hero-bottom>.journey-link{display:none}
 .hero-bottom{justify-content:space-between;gap:12px}
 .hero-bottom>.motion-control,.hero-bottom>.ripple-control{font-size:12px;padding-inline:12px}
 .hero-ferry{left:24%;width:86px}
}
@media(prefers-reduced-motion:reduce){.hero-ferry,.hero-water-glint{animation:none}.hero-bottom>.motion-control,.hero-bottom>.ripple-control{display:none}}