/* OUT2 r71-lasolas: logo-led neighborhood hero + tile, area photo strip, tap-to-load video (js/hoodbrand.js) */
.hb-bg{position:absolute;inset:0;overflow:hidden;background:radial-gradient(120% 90% at 50% 0%,color-mix(in srgb,var(--hb1) 78%,#000) 0%,var(--hb2) 58%,#06090f 100%);isolation:isolate}
.hb-bg::after{content:"";position:absolute;inset:0;background:radial-gradient(60% 50% at 50% 30%,rgba(255,196,120,.10),transparent 70%);pointer-events:none}
.hb-wv{position:absolute;left:-5%;width:110%;bottom:6%;height:46%;fill:none;stroke:rgba(255,255,255,.07);stroke-width:2;vector-effect:non-scaling-stroke;z-index:0}
.hb-logos{position:absolute;left:0;right:0;display:flex;align-items:center;justify-content:center;gap:clamp(16px,4.5vw,44px);z-index:1}
.hb-logos picture{display:block;line-height:0}
.hb-bg img.hb-l{position:static!important;inset:auto!important;display:block;width:auto!important;height:var(--lh)!important;aspect-ratio:var(--ar);max-width:none;object-fit:contain!important;animation:none!important;transform:none!important;opacity:1!important;filter:drop-shadow(0 6px 24px rgba(0,0,0,.35));z-index:1}
.hb-bg img.hb-l2{height:calc(var(--lh) * .9)!important}
.hb-sep{width:1px;align-self:stretch;margin:6% 0;background:linear-gradient(transparent,rgba(255,255,255,.45),transparent)}
/* hero: logos up top, title below in normal flow so nothing ever overlaps */
.e-hero.hd-hero.hb-on{--hbtop:clamp(78px,11vw,96px);--lh:min(25vw,150px);height:auto;min-height:0;background:#06090f}
.hb-hero .hb-logos{top:var(--hbtop);height:var(--lh)}
.e-hero.hd-hero.hb-on .e-shade{background:linear-gradient(0deg,rgba(0,0,0,.55),transparent 55%)}
.e-hero.hd-hero.hb-on .e-hero-in{position:relative;left:auto;right:auto;bottom:auto;padding:calc(var(--hbtop) + var(--lh) + clamp(28px,6vw,48px)) var(--pad) 34px}
.hb-ci{position:absolute;right:12px;bottom:12px;z-index:4}
@media (min-width:900px){
  .e-hero.hd-hero.hb-on{--lh:clamp(120px,10vw,160px);min-height:min(62vh,600px);display:flex;align-items:flex-end}
  .e-hero.hd-hero.hb-on .e-hero-in{flex:1;max-width:1400px;padding:clamp(110px,14vh,150px) calc(40% + var(--pad)) clamp(40px,7vh,72px) var(--pad)}
  .hb-hero .hb-logos{top:64px;bottom:0;height:auto;left:auto;right:var(--pad);width:38%}
  .e-hero.hd-hero.hb-on .e-shade{background:linear-gradient(90deg,rgba(0,0,0,.45),transparent 60%)}
}
/* homepage tile + break card: same look, smaller logos */
.hb-tile{z-index:0}.hb-tile{--lh:min(15vw,76px)}
.xh-img .hb-tile .hb-logos{top:18%}.eb-hood .hb-tile .hb-logos{top:22%}
.eb-hood .hb-tile{z-index:-2;--lh:min(16vw,88px)}
@media (min-width:900px){.xh-img .hb-tile{--lh:64px}.eb-hood .hb-tile .hb-logos{top:0;bottom:0;left:auto;right:6%;width:44%}}
/* the area: photo strip + one video */
.hb-area{margin:clamp(28px,5vw,48px) 0}
.hb-area h2{font:700 clamp(22px,3vw,30px)/1.1 var(--f-display);margin:0 0 14px}
.hb-gal{position:relative;display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;scrollbar-width:none;margin:0 calc(var(--pad) * -1);padding:0 var(--pad) 4px;scroll-padding:0 var(--pad)}
.hb-gal::-webkit-scrollbar{display:none}
.hb-fig{position:relative;flex:0 0 min(78vw,380px);margin:0;scroll-snap-align:start}
.hb-fig picture{display:block;border-radius:14px;overflow:hidden;background:#111;aspect-ratio:4/3}
.hb-fig img{display:block;width:100%;height:100%;object-fit:cover}
.hb-fig figcaption{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:8px;font-size:13px;color:var(--muted,#999)}
.hb-fig .ci-b{margin:0!important}
.hb-vwrap{position:relative;margin-top:clamp(20px,4vw,32px)}
.hb-vid{position:relative;display:block;width:100%;max-width:860px;aspect-ratio:16/9;padding:0;border:0;border-radius:14px;overflow:hidden;background:#000;cursor:pointer;color:#fff}
.hb-vid picture,.hb-vid img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hb-vid img{opacity:.82;transition:opacity .3s}
.hb-vid:hover img{opacity:1}
.hb-play{position:absolute;left:50%;top:50%;width:62px;height:62px;margin:-31px 0 0 -31px;border-radius:50%;background:rgba(255,255,255,.92);display:grid;place-items:center;box-shadow:0 8px 30px rgba(0,0,0,.35);transition:transform .25s var(--ease)}
.hb-vid:hover .hb-play{transform:scale(1.06)}
.hb-play svg{width:26px;height:26px;fill:#111;margin-left:3px}
.hb-vl{position:absolute;left:14px;bottom:12px;right:14px;text-align:left;font:600 12px Inter;letter-spacing:.08em;text-transform:uppercase;text-shadow:0 1px 8px rgba(0,0,0,.6)}
.hb-vid.on iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.hb-vcr{margin:8px 0 0}
@media (prefers-reduced-motion:reduce){.hb-vid img,.hb-play{transition:none}}
/* the guide renders into #hd after data loads; hold space so the footer does not jump into view (was the page's only layout shift) */
main#hd:empty{min-height:120vh}