/* Shared homepage-style search pill — used on every inner page. Same look as .hm-search in home.css. */
:root{--hm-font:'Outfit',var(--font);--hm-navy:#081E42;--hm-blue:#0F52A0}
.hm-search{display:flex;align-items:center;max-width:720px;margin:0 auto;background:#fff;border-radius:999px;padding:5px;box-shadow:0 14px 40px rgba(3,14,36,.35);font-family:var(--hm-font);font-weight:300}
.hm-search label{display:flex;align-items:center;gap:8px;flex:1;min-width:0;padding:0 16px;color:var(--hm-blue)}
.hm-search-loc{border-right:1px solid var(--line)}
.hm-search input,.hm-search select{width:100%;border:0;outline:0;background:transparent;font:300 15px var(--hm-font);color:var(--ink);padding:13px 0;text-overflow:ellipsis;box-shadow:none;border-radius:0}
.hm-search select{appearance:none;-webkit-appearance:none;cursor:pointer}
.hm-search button{flex:0 0 auto;border:0;cursor:pointer;background:var(--hm-blue);color:#fff;font:400 15px var(--hm-font);padding:13px 28px;border-radius:999px;transition:background .15s,transform .12s}
.hm-search button:hover{background:var(--hm-navy)}.hm-search button:active{transform:scale(.96)}
.hm-search:focus-within{box-shadow:0 0 0 3px rgba(240,164,0,.55),0 14px 40px rgba(3,14,36,.35)}
/* Blue band wrapper for pages that have no hero of their own */
.hm-search-band{background:radial-gradient(90% 140% at 80% -20%,#1d6fd1 0,transparent 55%),linear-gradient(180deg,var(--hm-blue),var(--hm-navy));padding:26px 0;margin:0 0 24px;border-radius:0 0 40px 40px}
.hm-search-plain{padding:8px 0 20px}
.hm-search-plain .hm-search{box-shadow:0 8px 28px rgba(8,30,66,.16);border:1px solid var(--line)}
@media (max-width:600px){
  .hm-search{flex-wrap:wrap;border-radius:26px}
  .hm-search label{flex:1 1 100%;padding:0 14px}
  .hm-search-loc{border-right:0;border-bottom:1px solid var(--line)}
  .hm-search button{flex:1 1 100%;margin-top:4px}
}
/* On pages whose hero is light (near-me hubs), soften the shadow and add an outline */
.home-hero-wrap .hm-search{box-shadow:0 8px 28px rgba(8,30,66,.16);border:1px solid var(--line);max-width:none}
.home-hero-wrap .hm-search:focus-within{box-shadow:0 0 0 3px rgba(240,164,0,.55),0 8px 28px rgba(8,30,66,.16)}

/* Listing hero: heading + sort sit above the search, like the homepage hero */
.hm-listing-hero{position:relative;text-align:center;color:#fff;margin:8px 0 26px;padding:34px 20px 38px;border-radius:28px;
  background:radial-gradient(90% 140% at 80% -20%,#1d6fd1 0,transparent 55%),linear-gradient(180deg,var(--hm-blue),var(--hm-navy));font-family:var(--hm-font)}
.hm-listing-hero h1{color:#fff;font-weight:200;font-size:clamp(24px,4.2vw,38px);line-height:1.2;letter-spacing:-.01em;margin:0 auto 16px;max-width:820px}
.hm-sort{display:inline-flex;align-items:center;gap:10px;margin:0 0 20px;padding:4px 6px 4px 16px;border-radius:999px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.22)}
.hm-sort label{font-size:13.5px;font-weight:300;color:#cfe0f5;margin:0}
.hm-sort select{border:0;outline:0;cursor:pointer;background:#fff;color:var(--ink);font:300 13.5px var(--hm-font);padding:8px 14px;border-radius:999px}
@media (max-width:600px){.hm-listing-hero{padding:26px 14px 28px;border-radius:22px}.hm-sort{width:100%;justify-content:space-between}.hm-sort select{flex:1;min-width:0}}