/* One continuous neighbourhood, with labels rather than cards. */
.hm-street{margin:0 auto;padding:0;width:100%;overflow:hidden}
.hm-street:before,.hm-street:after,.plot:before,.plot:after{display:none!important}
.plots{display:flex;align-items:flex-end;justify-content:center;gap:0;width:100%;max-width:1680px;padding:0;margin:0 auto;overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:thin;scrollbar-color:#bacbd7 transparent}
.plot{flex:1 0 140px;max-width:240px;min-width:0;padding:0;background:none;border:0;border-radius:0;box-shadow:none;text-decoration:none}
.plot .plot-ill{display:block;width:100%;height:auto;aspect-ratio:240/220;margin:0;object-fit:contain;transition:filter .2s}
.plot .plot-btn{margin:0;min-height:44px;height:auto;display:flex;padding:8px 4px 14px;background:none;border:0;border-radius:0;box-shadow:none;font-size:12px;line-height:1.4;white-space:normal;text-align:center;color:#1b2b3b;transition:color .2s;gap:6px}
.plot:hover .plot-ill,.plot:focus-visible .plot-ill{transform:none;filter:brightness(1.025)}
.plot:hover .plot-btn,.plot:focus-visible .plot-btn{background:none;border:0;color:#b94243;transform:none;text-decoration:underline;text-underline-offset:5px;box-shadow:none}
.plot .arr{color:#ce6363;font-size:14px}
.plot:focus-visible{outline:2px solid #bc5252;outline-offset:-3px;border-radius:5px}
img.ill{display:block;object-fit:contain}
@media(min-width:1681px){.hm-street{background:linear-gradient(transparent calc(100% - 68px),#e5ecf1 calc(100% - 68px),#e5ecf1 calc(100% - 48px),transparent calc(100% - 48px))}}
@media(max-width:1000px){.plot{flex-basis:135px}.plot .plot-btn{font-size:11px}.plots{justify-content:flex-start}}
@media(max-width:760px){.hm-street{order:2;margin:12px 0 0;padding:0}.plots{padding:0 12px 0;scroll-snap-type:x mandatory}.plot{flex:0 0 155px;scroll-snap-align:start}.plot .plot-btn{font-size:12px;min-height:48px;padding-bottom:12px}.plots::-webkit-scrollbar{display:block;height:3px}.plots::-webkit-scrollbar-thumb{background:#bacbd7;border-radius:3px}}
@media(prefers-reduced-motion:reduce){.plot .plot-ill,.plot .plot-btn,.plot .arr{transition:none!important}}
/* People are the foreground of the neighbourhood. Motion is quiet and staggered. */
.neighbourhood-caption{display:flex;justify-content:center;align-items:center;gap:24px;padding:18px 24px 0;color:#536b7c}
.neighbourhood-caption p{margin:0;font-size:14px;font-weight:600}
.motion-toggle{border:0;border-bottom:1px solid #a9bac6;border-radius:0;padding:4px 0;background:transparent;color:#536b7c;font:inherit;font-size:11px;cursor:pointer;box-shadow:none}
.motion-toggle:focus-visible{outline:2px solid #b94b4c;outline-offset:5px}
.neighbour-arm{transform-origin:10px -45px;animation:neighbour-talk 5.5s ease-in-out infinite;animation-delay:var(--phase,0s)}
.neighbour-arm.waving{animation-name:neighbour-wave;animation-duration:6s}
.neighbour-arm.painting{animation-name:neighbour-paint;animation-duration:4.5s}
.neighbour-head{transform-origin:0 -55px;animation:neighbour-nod 7s ease-in-out infinite;animation-delay:var(--phase,0s)}
@keyframes neighbour-wave{0%,35%,65%,100%{transform:rotate(0)}42%,54%{transform:rotate(-12deg)}48%,60%{transform:rotate(5deg)}}
@keyframes neighbour-talk{0%,40%,100%{transform:rotate(0)}55%,70%{transform:rotate(-7deg)}62%{transform:rotate(-3deg)}}
@keyframes neighbour-paint{0%,20%,80%,100%{transform:rotate(0)}40%,60%{transform:rotate(-12deg)}50%,70%{transform:rotate(-3deg)}}
@keyframes neighbour-nod{0%,45%,70%,100%{transform:rotate(0)}55%{transform:rotate(5deg)}62%{transform:rotate(-2deg)}}
.scene-paused .neighbour-arm,.scene-paused .neighbour-head,.scene-offscreen .neighbour-arm,.scene-offscreen .neighbour-head{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){body:not(.scene-playing) .neighbour-arm,body:not(.scene-playing) .neighbour-head{animation-play-state:paused}}
@media(max-width:760px){.neighbourhood-caption{padding:15px 20px 0;gap:12px;justify-content:space-between}.neighbourhood-caption p{font-size:12px;max-width:220px}.motion-toggle{font-size:10px;flex-shrink:0}.plot{flex-basis:190px}}
.door-ill{justify-content:center}.door-ill svg.people-scene{height:170px;width:auto;max-width:100%}@media(max-width:760px){.door-ill svg.people-scene{height:150px}}
.cloud-drift{animation:cloud-breathe 20s ease-in-out infinite;transform-box:view-box}
.plot:nth-child(2n) .cloud-drift{animation-delay:-8s;animation-duration:26s}
.plot:nth-child(3n) .cloud-drift{animation-delay:-15s;animation-duration:23s}
@keyframes cloud-breathe{0%,100%{transform:translateX(-6px)}50%{transform:translateX(6px)}}
.neighbour-arm{animation-name:neighbour-conversation;transform-origin:9px -57px}
@keyframes neighbour-conversation{0%,40%,100%{transform:rotate(0)}55%,70%{transform:rotate(-3deg)}62%{transform:rotate(-1deg)}}
.scene-paused .cloud-drift,.scene-offscreen .cloud-drift{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){body:not(.scene-playing) .cloud-drift{animation-play-state:paused}}
.delivery-arm-back,.delivery-arm-front{display:none}.delivery-arm-line,.delivery-arm-outline{fill:#faf9f5;stroke:#344b5b;stroke-width:1.05}
