/* ============================================================
   TownVue - Homepage, "Immersive" build.
   Reuses state-immersive.css (tokens, d3-bar, color bands, d3-biz /
   d3-intro-offer / d3-biz-feats "Own a local business" block,
   d3-store-btn, ph-* gradients, tv-btn, tv-container, d3-eyebrow/h2).
   This file adds the homepage-specific hm-* pieces and the full-bleed
   _HomeLayout reset. Scoped under .state-immersive.
   ============================================================ */

/* Full-bleed under _HomeLayout (same approach as claim-immersive.css; this
   sheet loads only on the homepage, so it affects only this page). */
.home-shell{ padding-block:0 !important; }
.home-shell__inner{ max-width:none !important; width:100% !important; padding-inline:0 !important; margin-inline:0 !important; }

/* Header (navy bar) and the gold announce bar are the shared _HomeHeader and
   _RolloutRibbon partials, styled within those partials. Nothing header-related
   lives here anymore. */

/* ── Hero (cream) ── */
.state-immersive .hm-hero{ background:var(--beige); padding:56px 0 64px; }
.state-immersive .hm-hero-in{ text-align:center; }
.state-immersive .hm-tag{ display:inline-flex; align-items:center; gap:9px; background:#fff; border:1px solid var(--line); color:var(--ink-soft); font-size:13px; font-weight:700; padding:7px 15px; border-radius:var(--r-pill); }
.state-immersive .hm-tag .dot{ width:8px; height:8px; border-radius:50%; background:var(--clay); }
.state-immersive .hm-h1{ font-family:var(--serif); font-weight:600; color:var(--navy); font-size:clamp(44px,7vw,84px); line-height:.98; letter-spacing:-.025em; margin:20px 0 0; }
.state-immersive .hm-h1 .g{ color:var(--gold); }
.state-immersive .hm-sub{ font-size:19px; line-height:1.55; color:var(--ink-soft); margin:20px auto 0; max-width:48ch; }
.state-immersive .hm-sub b{ color:var(--navy); }
.state-immersive .hm-cta{ display:flex; align-items:center; justify-content:center; gap:18px 22px; flex-wrap:wrap; margin-top:26px; }
.state-immersive .hm-cta .note{ font-size:13.5px; font-weight:600; color:var(--muted); }
.state-immersive .hm-cta .note .c{ color:var(--sage-700); font-weight:900; }

/* ── Location bar ── */
.state-immersive .hm-loc{ display:flex; align-items:center; gap:6px; background:#fff; border:1.5px solid rgba(244,180,0,.6); border-radius:var(--r-lg); padding:10px 12px; margin:30px auto 0; max-width:720px; box-shadow:var(--shadow-md); position:relative; text-align:left; }
.state-immersive .hm-loc .pin{ flex:none; width:24px; height:24px; color:var(--navy); }
.state-immersive .hm-loc .pin svg{ width:22px; height:22px; }
.state-immersive .hm-loc .seg{ display:flex; flex-direction:column; gap:1px; }
.state-immersive .hm-loc .seg-loc{ flex:1; min-width:0; padding:0 4px; }
.state-immersive .hm-loc .lab{ font-size:10.5px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); }
.state-immersive .hm-loc input.city{ border:none; outline:none; background:transparent; font-family:var(--sans); font-size:15.5px; font-weight:600; color:var(--navy); width:100%; padding:1px 0; }
.state-immersive .hm-loc input.city::placeholder{ color:var(--muted); font-weight:500; }
.state-immersive .hm-loc .gps{ flex:none; width:40px; height:40px; border-radius:10px; border:none; background:var(--navy); color:var(--gold); font-size:17px; display:flex; align-items:center; justify-content:center; cursor:pointer; transition:background .2s; }
.state-immersive .hm-loc .gps:hover{ background:#06222b; }
.state-immersive .hm-loc .divider{ width:1px; align-self:stretch; background:var(--line); margin:2px 6px; }
.state-immersive .hm-loc .seg-rad{ flex:none; width:230px; padding:0 4px; }
.state-immersive .hm-loc .rad-row{ display:flex; align-items:center; gap:10px; }
.state-immersive .hm-loc .rad-row input[type=range]{ flex:1; -webkit-appearance:none; appearance:none; height:6px; border-radius:var(--r-pill); background:var(--beige-2); outline:none; }
.state-immersive .hm-loc .rad-row input[type=range]::-webkit-slider-thumb{ -webkit-appearance:none; width:18px; height:18px; border-radius:50%; background:var(--navy); border:3px solid #fff; box-shadow:0 1px 4px rgba(11,45,57,.3); cursor:pointer; }
.state-immersive .hm-loc .rad-row input[type=range]::-moz-range-thumb{ width:18px; height:18px; border-radius:50%; background:var(--navy); border:3px solid #fff; cursor:pointer; }
.state-immersive .hm-loc .rad-val{ font-size:12.5px; font-weight:800; color:var(--navy); white-space:nowrap; }
.state-immersive .hm-loc-results{ position:absolute; top:calc(100% + 6px); left:0; right:0; z-index:30; background:#fff; border:1px solid var(--line); border-radius:var(--r-md); box-shadow:var(--shadow-lg); overflow:hidden; display:none; }
.state-immersive .hm-loc-results.show{ display:block; }
.state-immersive .hm-loc-item{ display:flex; align-items:center; gap:9px; padding:11px 16px; font-size:14px; color:var(--ink); cursor:pointer; }
.state-immersive .hm-loc-item:hover{ background:var(--beige); }
.state-immersive .hm-loc-item .mk{ color:var(--clay); }
.state-immersive .hm-loc-hint{ font-size:13.5px; font-weight:600; color:var(--muted); margin-top:14px; }

/* ── Content pillars ── */
.state-immersive .hm-pillars{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-top:34px; }
.state-immersive .hm-pill{ position:relative; border-radius:var(--r-lg); overflow:hidden; min-height:236px; display:flex; flex-direction:column; justify-content:flex-end; padding:22px; color:#fff; text-align:left; box-shadow:var(--shadow-md); transition:transform .2s ease; }
.state-immersive .hm-pill:hover{ transform:translateY(-5px); }
.state-immersive .hm-pill .bg{ position:absolute; inset:0; z-index:0; }
.state-immersive .hm-pill::after{ content:""; position:absolute; inset:0; z-index:1; background:linear-gradient(180deg, rgba(11,45,57,.12) 0%, rgba(11,45,57,.62) 100%); }
.state-immersive .hm-pill .pico{ position:absolute; top:18px; left:18px; z-index:2; width:46px; height:46px; border-radius:12px; background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.3); display:flex; align-items:center; justify-content:center; color:#fff; }
.state-immersive .hm-pill .pico svg{ width:23px; height:23px; }
.state-immersive .hm-pill .ct{ position:relative; z-index:2; }
.state-immersive .hm-pill .ct h3{ font-family:var(--serif); font-size:21px; font-weight:600; color:#fff; line-height:1.1; }
.state-immersive .hm-pill .ct p{ font-size:13px; line-height:1.45; color:rgba(255,255,255,.92); margin-top:7px; }
.state-immersive .hm-pill .go{ display:inline-flex; align-items:center; gap:6px; font-weight:800; font-size:13.5px; color:var(--gold); margin-top:14px; }
.state-immersive .hm-pill .go .arr{ transition:transform .2s ease; }
.state-immersive .hm-pill:hover .go .arr{ transform:translateX(4px); }

/* ── Trust strip (navy) ── */
.state-immersive .hm-trust{ background:var(--navy); padding:30px 0; }
.state-immersive .hm-trust-proof{ display:flex; align-items:center; justify-content:center; gap:18px 26px; flex-wrap:wrap; padding-bottom:22px; border-bottom:1px solid var(--navy-line); }
.state-immersive .hm-proof-rate{ display:flex; align-items:center; gap:13px; }
.state-immersive .hm-proof-rate .avs{ display:inline-flex; }
.state-immersive .hm-proof-rate .av{ width:34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:#fff; font-weight:800; font-size:13px; border:2px solid var(--navy); margin-left:-9px; }
.state-immersive .hm-proof-rate .av:first-child{ margin-left:0; }
.state-immersive .hm-proof-rate .stars{ color:var(--gold); letter-spacing:1px; font-size:15px; }
.state-immersive .hm-proof-rate .txt{ font-size:13.5px; color:var(--muted-navy); display:block; margin-top:1px; }
.state-immersive .hm-proof-rate .txt strong{ color:#fff; }
.state-immersive .hm-trust-in{ display:flex; align-items:center; justify-content:center; gap:14px 32px; flex-wrap:wrap; padding-top:22px; }
.state-immersive .hm-trust .ti{ display:inline-flex; align-items:center; gap:9px; font-size:13.5px; font-weight:600; color:var(--muted-navy); white-space:nowrap; }
.state-immersive .hm-trust .ti strong{ color:#fff; }
.state-immersive .hm-trust .ti .ic{ flex:none; width:18px; height:18px; color:var(--gold); }
.state-immersive .hm-trust .ti .ic svg{ width:18px; height:18px; }

/* ── From the community ── */
.state-immersive .hm-art-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:24px; flex-wrap:wrap; margin-bottom:34px; }
.state-immersive .hm-swap{ font-size:13px; font-style:italic; color:var(--clay-700); margin-top:14px; }
.state-immersive .hm-art-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.state-immersive .hm-art{ display:flex; flex-direction:column; background:var(--paper); border:1px solid var(--line); border-radius:var(--r-md); overflow:hidden; box-shadow:var(--shadow-sm); transition:transform .2s ease, box-shadow .2s ease; color:var(--ink); }
.state-immersive .hm-art:hover{ transform:translateY(-4px); box-shadow:var(--shadow-md); }
.state-immersive .hm-art .img{ position:relative; height:128px; display:flex; align-items:flex-start; }
.state-immersive .hm-art .img > img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.state-immersive .hm-art .badge{ position:relative; z-index:1; margin:12px; font-size:10px; font-weight:800; letter-spacing:.07em; text-transform:uppercase; background:var(--gold); color:var(--navy); padding:4px 10px; border-radius:6px; }
.state-immersive .hm-art .body{ padding:15px 17px 17px; display:flex; flex-direction:column; gap:9px; flex:1; }
.state-immersive .hm-art .tt{ font-family:var(--serif); font-size:17px; font-weight:600; color:var(--navy); line-height:1.25; }
.state-immersive .hm-art .dt{ font-size:12.5px; color:var(--muted); margin-top:auto; }
.state-immersive .hm-art .dt .ic{ color:var(--clay); font-size:9px; vertical-align:middle; }

/* ── Responsive ── */
@media (max-width:980px){
  .state-immersive .hm-pillars{ grid-template-columns:1fr 1fr; }
  .state-immersive .hm-art-grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width:760px){
  .state-immersive .hm-loc{ flex-wrap:wrap; }
  .state-immersive .hm-loc .divider{ display:none; }
  .state-immersive .hm-loc .seg-rad{ width:100%; }
}
@media (max-width:560px){
  .state-immersive .hm-pillars{ grid-template-columns:1fr; }
  .state-immersive .hm-art-grid{ grid-template-columns:1fr; }
}