/* ===========================================================================
   less2own — the town picker over the hero map.

   Replaces the free-roam overlay. The shape is Tony's: town buttons across the
   TOP, the chosen place named under them, the option to build appearing only
   after a town is picked, and the bottom carrying just the two standing CTAs.

   NOTHING HERE MAY SWALLOW THE MAP. The overlay is a full-bleed layer over a
   canvas that still has to receive scroll, so the wrapper is pointer-events
   none and only the controls themselves take pointer events back. Getting that
   the wrong way round makes the page feel broken in a way that is hard to
   attribute — the wheel simply stops working over most of the hero.
   =========================================================================== */

/* Z-INDEX 8, ABOVE #heroEnd's 7 — and this is why the buttons did not work.
   Tony: "they arent actual buttons." They were: real <button>s, pointer-events
   auto, correct boxes, and completely unclickable, because .hero-end is
   `position:absolute; inset:0; z-index:7` — a full-viewport sheet laid over the
   whole hero to bottom-align its copy. Every click on a town chip landed on
   that sheet instead.

   It survived testing because the test drove the buttons with element.click(),
   which dispatches straight at the node and ignores anything painted on top.
   A real pointer never reached them. Hit-test with elementFromPoint and click
   with the mouse, or a covered control looks perfect right up until a person
   uses it.

   The wrapper stays pointer-events:none so raising it steals nothing: only the
   chips themselves take events, and .hero-end's own CTAs underneath still get
   every click that is not on one. */
.hero-descent .rm-ui{
  position:absolute; inset:0; z-index:8;
  pointer-events:none;
  opacity:0; transition:opacity .45s ease;
  font-family:inherit;
}
.hero-descent .rm-ui.live{opacity:1}

/* ---- the town row, at the top ------------------------------------------- */
/* CLEAR OF THE SITE HEADER. `.hero-pin` is sticky at top:0, so its own y=0 sits
   UNDERNEATH the fixed brand bar and nav — about 112 px of it. The first build
   put the town row at 36 px and it was invisible on the live page: present in
   the DOM, correct box, opacity 1, and painted behind the nav the whole time.
   A structural check said it was fine; only a screenshot showed it was not. */
.rm-top{
  position:absolute; left:50%; top:clamp(124px,17vh,168px);
  transform:translateX(-50%);
  width:min(940px,94vw);
  text-align:center;
  transition:opacity .5s ease, transform .5s ease;
}
.rm-top.gone{opacity:0; transform:translateX(-50%) translateY(-14px); pointer-events:none}
.rm-top>b{
  display:block; margin-bottom:.6rem;
  font-size:clamp(.78rem,1.5vw,.95rem); font-weight:600;
  letter-spacing:.14em; text-transform:uppercase;
  color:#fff; text-shadow:0 2px 14px rgba(0,0,0,.75);
}
/* A STOP WITH NO EXPLANATION READS AS A BROKEN PAGE. When the gate blocks a
   scroll, the question it is waiting on gets a short pulse, so the reason the
   page stopped is the thing that moves. Without this the wheel simply dies and
   the visitor's next move is the back button. */
.rm-top.nudge{animation:rmNudge .45s ease}
@keyframes rmNudge{
  0%,100%{transform:translateX(-50%) scale(1)}
  35%{transform:translateX(-50%) scale(1.045)}
}
.rm-top.nudge>b{animation:rmGlow .45s ease}
@keyframes rmGlow{50%{color:var(--acc,#d8a24a)}}

.rm-towns{display:flex; flex-wrap:wrap; gap:.4rem; justify-content:center}
.rm-town{
  pointer-events:auto;
  appearance:none; cursor:pointer;
  padding:.5rem .95rem;
  font:inherit; font-size:clamp(.78rem,1.4vw,.92rem); font-weight:600;
  letter-spacing:.02em;
  color:#f2f5fb;
  background:rgba(12,16,24,.62);
  border:1px solid rgba(233,237,246,.34);
  border-radius:999px;
  backdrop-filter:blur(7px); -webkit-backdrop-filter:blur(7px);
  transition:background .2s ease, border-color .2s ease, color .2s ease, transform .12s ease;
}
.rm-town:hover{background:rgba(20,26,38,.85); border-color:rgba(233,237,246,.62)}
.rm-town:active{transform:translateY(1px)}
.rm-town.on{
  color:#1a1206;
  background:var(--acc,#d8a24a);
  border-color:var(--acc,#d8a24a);
}
.rm-town:focus-visible{outline:2px solid var(--acc,#d8a24a); outline-offset:3px}

/* ---- where you are ------------------------------------------------------ */
.rm-here{
  position:absolute; left:50%; top:clamp(196px,26vh,258px);
  transform:translateX(-50%);
  padding:.34rem .8rem;
  font-size:clamp(.72rem,1.3vw,.86rem); letter-spacing:.16em; text-transform:uppercase;
  color:#fff; background:rgba(12,16,24,.5);
  border:1px solid rgba(233,237,246,.22); border-radius:999px;
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  text-shadow:0 1px 10px rgba(0,0,0,.7);
  white-space:nowrap;
}

/* ---- build here, only once a town is chosen ----------------------------- */
.rm-build{
  position:absolute; left:50%; bottom:clamp(88px,16vh,150px);
  transform:translateX(-50%);
  animation:rmRise .5s ease both;
}
.rm-build .btn{pointer-events:auto}
@keyframes rmRise{from{opacity:0; transform:translateX(-50%) translateY(12px)}
                  to{opacity:1; transform:translateX(-50%) translateY(0)}}

/* ---- THE BOTTOM CTAs ARE THE HOLD CARD'S OWN, not a second set ----------
   #heroEnd already carries the three buttons bottom-left. Tony's rule is about
   which of them is offered when: "the bottom CTA should only include find your
   builder and builder specs... i should only have an option to build after i
   click the location." So the accent button — "Build your spec" — is withdrawn
   for as long as the picker is up and no town has been chosen. The two that
   always apply stay exactly where they have always been.

   ONE BUILD BUTTON, EVER. The hero's own accent link goes away for the whole
   time the picker is up — before a town is chosen because there is nothing to
   build on yet, and after one is chosen because the picker's own button has
   taken its place in this very row. Leaving it visible after a pick put two
   different "build" buttons side by side, going to two different places: the
   link jumps to /build, while the picker's button flies down onto the parcel
   and hands over to the frames, which is the journey Tony described. */
.hero-descent.rm-live .hero-end .hero-ctas > a.btn-acc{display:none}
.rm-go{pointer-events:auto}
.rm-go[hidden]{display:none}

/* The rates tile sits where the town row goes; the title card belongs to the
   top of the descent and is already gone by the hold. */
.hero-descent.rm-live .gvmap-wrap .rates-tile{opacity:0 !important; pointer-events:none}

@media (max-width:700px){
  .rm-top{top:10px; width:96vw}
  .rm-town{padding:.42rem .72rem}
  .rm-here{top:auto; bottom:clamp(140px,26vh,210px)}
}

@media (prefers-reduced-motion:reduce){
  .hero-descent .rm-ui,.rm-top,.rm-town{transition:none}
  .rm-build{animation:none}
}