/* Valley Atlas — location pages: no photography. Hero pairs the copy with the quote form;
   the areas section carries a focused Valley map (this town + its neighbours, route from Van Nuys). */

.lhero{padding:clamp(36px,5vw,72px) 0 clamp(64px,8vw,110px);border-bottom:1px solid var(--line)}
.lhero__in{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(36px,5vw,80px);align-items:start}
.lhero__copy{min-width:0}
.lhero__form{position:sticky;top:calc(var(--bar-h) + 24px)}
.lhero__after{margin-top:22px}
.lhero__after .callout{margin-top:0}
.lhero .hl{animation:hl 1s var(--ease) .5s forwards}
.js .lhero .lede,.js .lhero .checks,.js .lhero__after,.js .lhero .acts,.js .lhero__form{opacity:0;transform:translateY(22px);animation:rise .9s var(--ease) forwards}
.js .lhero .lede{animation-delay:.2s}.js .lhero .checks{animation-delay:.3s}.js .lhero__after{animation-delay:.38s}.js .lhero .acts{animation-delay:.44s}.js .lhero__form{animation-delay:.15s}

.byline{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin-top:16px;font:500 12.5px/1.4 var(--f-m);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.byline__badge{padding:5px 10px;background:var(--hi);border:1.5px solid var(--ink);color:var(--ink);letter-spacing:.08em}

/* focused map */
.map--focus .map__pt.is-far circle{stroke:rgba(20,37,79,.35)}
.map--focus .map__pt.is-far text{fill:var(--ink-3)}
.map--focus .map__pt.is-near circle{fill:var(--hi)}
.map--focus .map__home.is-base circle{fill:var(--ink);stroke:var(--ink)}
.map--focus .map__routes path{stroke:var(--ink);stroke-width:2.4;stroke-dasharray:var(--len);transition-duration:1.6s}
.map__focus circle{fill:var(--hi);stroke:var(--ink);stroke-width:3.5}
.map__focus .map__pulse{fill:none;stroke:var(--ink);stroke-width:2;transform-box:fill-box;transform-origin:center;animation:ping 2.4s var(--ease) infinite}
.map__focus text{font:700 26px var(--f-l);fill:var(--ink);letter-spacing:.06em;text-transform:uppercase;paint-order:stroke;stroke:var(--card);stroke-width:6px;stroke-linejoin:round}

@media (min-width:1081px){
  .sec--areas .gaz{grid-template-columns:1.25fr .75fr;align-items:start}
}
@media (max-width:1080px){
  .lhero__in{grid-template-columns:1fr}
  .lhero__form{position:static}
}
@media (max-width:700px){
  .map--focus .map__pt.is-near text{display:block;font-size:30px}
  .map--focus .map__pt.is-far text{display:none}
  .map__focus text{font-size:38px}
  .lhero .acts .btn{flex:1 1 100%;justify-content:center}
  .lhero__form .sheet{margin-right:8px}
}
@media (prefers-reduced-motion:reduce){
  .js .lhero .lede,.js .lhero .checks,.js .lhero__after,.js .lhero .acts,.js .lhero__form{opacity:1!important;transform:none!important}
}