/* Homepage search hero. DESIGN_VARIANCE 7 / MOTION_INTENSITY 7 / VISUAL_DENSITY 4.
   Existing Precinct typography, photography and content are retained.
   Dark search hero and warm page below follow the approved concept. */
.demo-home { --demo-night: #171522; --demo-mist: #ddd4f5; --demo-muted: #cfccd9; }
.demo-hero { position: relative; isolation: isolate; overflow: hidden; background: var(--demo-night); color: var(--paper); padding: 48px 24px; --demo-hero-height:560px; min-height:var(--demo-hero-height); display:grid; grid-template-columns:minmax(0,1fr); align-items:center; }
.demo-photo { position:absolute; inset:0 0 auto; height:var(--demo-hero-height); z-index:-2; background:linear-gradient(90deg,rgba(23,21,34,.96),rgba(31,25,49,.72) 60%,rgba(39,28,61,.42)),url('/imagery/PrecinctHeader_Building_Night.webp') center 44%/cover; opacity:.56; }
.demo-photo::after { content:''; position:absolute; inset:0; background:linear-gradient(0deg,var(--demo-night),transparent 55%); }
.demo-orb { position:absolute; z-index:-1; pointer-events:none; width:min(520px,calc(100% - 24px)); aspect-ratio:1; top:calc(var(--demo-hero-height) / 2); left:50%; translate:-50% -50%; transform:scale(1); opacity:.65; transition:transform .75s cubic-bezier(.22,1,.36,1),opacity .65s ease; }
.demo-content { min-width:0; width:100%; max-width:860px; margin:0 auto; }
.demo-intro { text-align:center; }
.demo-intro>div { min-height:0; overflow:hidden; }
.demo-hero h1 { margin:0; font-size:clamp(36px,4.4vw,60px); line-height:1.09; letter-spacing:-.035em; font-weight:400; }
.demo-hero h1 em { font-family:var(--font-italic); font-weight:400; color:var(--demo-mist); }
.demo-subtitle { color:var(--demo-muted); margin-top:23px; }
.demo-search-area { min-width:0; width:100%; max-width:660px; margin:auto; }
.demo-search-form { display:flex; align-items:center; gap:12px; height:64px; border-radius:100px; padding:8px 10px 8px 22px; background:var(--paper); border:1px solid rgba(255,255,255,.7); box-shadow:0 6px 44px rgba(0,0,0,.16); transition:box-shadow .3s ease; }
.demo-search-form:focus-within { box-shadow:0 0 0 4px rgba(221,212,245,.16),0 10px 44px rgba(0,0,0,.16); }
.demo-search-form .lux-search-icon { color:var(--ink-mid); width:19px; height:19px; flex:none; }
.demo-search-form .lux-search-input { color:var(--ink); font-size:16px; min-width:0; width:100%; background:transparent; padding:0; }
.demo-search-form .lux-search-input::placeholder { color:#6b6a63; opacity:1; }
.demo-suggestions { margin-top:14px;  }
.demo-suggestions>div { min-height:0; overflow:hidden; }
.demo-suggestions .lux-search-chips[data-search-suggestions] { max-width:100%; margin:0; }
.demo-suggestions .lux-search-chip { color:#e7e2f0; background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.19); font-size:11px; padding:7px 13px; }
.demo-suggestions .lux-search-chip:hover { background:rgba(255,255,255,.12); color:#fff; border-color:rgba(221,212,245,.7); }
.demo-home .lux-qa-band { padding-top:28px; }
.demo-sr { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.demo-hero button:focus-visible,.demo-hero a:focus-visible { outline:2px solid var(--demo-mist); outline-offset:4px; }
@media(max-width:767px) {
  .demo-hero { padding:40px 18px; --demo-hero-height:500px; }
  .demo-orb { opacity:.58; }
  .demo-hero h1 { font-size:clamp(33px,9vw,48px); line-height:1.12; }
  .demo-subtitle { margin-top:21px; }
  .demo-search-form { height:58px; padding-left:17px; gap:8px; }
  .demo-search-form .lux-search-input { font-size:16px; }
  .demo-suggestions { margin-top:16px; }
}


.demo-hero .search-orb-art { opacity:1; }
.demo-hero .has-live-orb .search-orb-art { opacity:0; }
.demo-search-form .lux-search-input[readonly] { cursor:text; }