/* v3.9.3/3.9.4 - animated local-business street scene behind the home hero.
   Cars drive both ways (left-hand traffic), pins float, shop signs blink. */
.l333h-hero .wwd-hero-scene{position:absolute;left:0;right:0;bottom:0;z-index:1;pointer-events:none;
  height:clamp(230px,23.2vw,560px);
  -webkit-mask-image:linear-gradient(to top,#000 74%,transparent 100%);mask-image:linear-gradient(to top,#000 74%,transparent 100%)}
.wwd-hero-scene .wwd-scene-svg{display:block;width:100%;height:100%;overflow:hidden}
/* soft white wash behind the headline/search so text stays crisp over the skyline */
.l333h-hero .l333h-hero-overlay{background:radial-gradient(ellipse 56% 58% at 50% 36%,rgba(255,255,255,.66),rgba(255,255,255,.36) 70%)}

/* v3.9.4 - raise the hero content (icon, title, search, intro) so it sits in the clear sky
   above the shop-fronts instead of overlapping them. The scene height is shared via a variable,
   so the space reserved under the text always matches the artwork at every screen width. */
.l333h-hero{--wwd-scene-h:clamp(230px,23.2vw,560px);
  align-items:flex-start;height:auto;min-height:0;
  padding:34px 0 calc(var(--wwd-scene-h) * .54)}
.l333h-hero .l333h-hero-content{width:min(1000px,calc(100% - 32px));margin-top:0}
.l333h-hero .l333h-hero-title{margin-bottom:22px;gap:12px}
.l333h-hero .l333h-search-symbol{width:48px;height:48px;font-size:25px}
.l333h-hero .l333h-brandline{font-size:clamp(28px,4.2vw,48px)}
.l333h-hero .l333h-subline{margin-top:6px}
.l333h-hero .l333h-search{max-width:780px}
/* readable even if a building sits behind it */
.l333h-hero .l333h-hero-copy{margin-top:18px;max-width:640px;font-size:15px;line-height:1.6;color:#3c5860;
  padding:9px 18px;border-radius:12px;background:rgba(255,255,255,.72);
  -webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}

.wwd-hero-scene .sc-drive{transform:translateX(-240px);animation:wwdScR var(--d,26s) linear var(--dl,0s) infinite;will-change:transform}
.wwd-hero-scene .sc-drive.l{animation-name:wwdScL}
@keyframes wwdScR{from{transform:translateX(-240px)}to{transform:translateX(1840px)}}
@keyframes wwdScL{from{transform:translateX(1840px)}to{transform:translateX(-240px)}}

.wwd-hero-scene .sc-cloud{transform:translateX(-320px);animation:wwdScCloud var(--d,120s) linear var(--dl,0s) infinite}
@keyframes wwdScCloud{from{transform:translateX(-320px)}to{transform:translateX(1900px)}}

.wwd-hero-scene .sc-wh{transform-box:fill-box;transform-origin:center;animation:wwdScSpin .55s linear infinite}
@keyframes wwdScSpin{to{transform:rotate(360deg)}}

.wwd-hero-scene .sc-pin{animation:wwdScBob 3.2s ease-in-out var(--dl,0s) infinite}
@keyframes wwdScBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.wwd-hero-scene .sc-ring{transform-box:fill-box;transform-origin:center;animation:wwdScRing 2.6s ease-out var(--dl,0s) infinite}
@keyframes wwdScRing{0%{transform:scale(.4);opacity:.8}100%{transform:scale(1.7);opacity:0}}

.wwd-hero-scene .tw{animation:wwdScTw 4.2s ease-in-out var(--dl,0s) infinite}
@keyframes wwdScTw{0%,100%{opacity:.15}50%{opacity:1}}
.wwd-hero-scene .sc-blink{animation:wwdScBl 1.8s steps(1) infinite}
@keyframes wwdScBl{0%,62%{opacity:1}63%,100%{opacity:.25}}

.wwd-hero-scene .sc-steam{transform-box:fill-box;animation:wwdScSteam 2.6s ease-in-out infinite}
@keyframes wwdScSteam{0%{transform:translateY(2px);opacity:0}40%{opacity:.85}100%{transform:translateY(-9px);opacity:0}}

.wwd-hero-scene .sc-leg{transform-box:fill-box;transform-origin:50% 0;animation:wwdScLeg .7s ease-in-out infinite alternate}
.wwd-hero-scene .sc-leg.b{animation-direction:alternate-reverse}
@keyframes wwdScLeg{from{transform:rotate(-24deg)}to{transform:rotate(24deg)}}

@media(max-width:700px){
  .l333h-hero .wwd-hero-scene{height:clamp(200px,52vw,300px)}
  .wwd-hero-scene .sc-far{opacity:.4}
}
@media(max-width:700px){
  .l333h-hero{--wwd-scene-h:clamp(200px,52vw,300px);padding:26px 0 calc(var(--wwd-scene-h) * .5)}
  .l333h-hero .l333h-hero-title{margin-bottom:16px}
  .l333h-hero .l333h-hero-copy{font-size:13.5px;padding:8px 14px}
}
/* Motion-sensitive visitors get a still street with vehicles parked at fixed spots. */
@media (prefers-reduced-motion:reduce){
  .wwd-hero-scene *{animation:none!important}
  .wwd-hero-scene .sc-drive,.wwd-hero-scene .sc-cloud{transform:translateX(var(--x,300px))}
}