/* Sandcastle Villa & Beach House — interactive map */

:root {
  --sand:      #e8dcc8;
  --sand-deep: #cdbb9c;
  --ink:       #1d2733;
  --ink-soft:  #55606d;
  --paper:     #fbf8f2;
  --villa:     #d97706;   /* amber — the Villa branch */
  --bh:        #0d9488;   /* teal  — the Beach House branch */
  --shared:    #f5f1e6;   /* the drive both routes share */
  --shared-dk: #8a7f68;
  --shadow:    0 2px 8px rgba(20,28,38,.10), 0 12px 32px rgba(20,28,38,.14);
  --radius:    14px;
  --panel-w:   382px;
}

* { box-sizing: border-box; }

/* iOS Safari defaults button text to the system accent (blue). Every button
   here is styled, so inherit the surrounding colour instead. */
button { color: inherit; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  font: 15px/1.5 ui-sans-serif, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--ink);
  background: var(--paper);
  -webkit-text-size-adjust: 100%;
}

#map { position: absolute; inset: 0; background: #123; }

/* ───────────────────────────────── top bar ───────────────────────────────── */

.topbar {
  position: absolute;
  z-index: 500;
  top: 0; left: 0; right: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 16px;
  padding-top: max(12px, env(safe-area-inset-top));
  background: linear-gradient(180deg, rgba(251,248,242,.97) 0%, rgba(251,248,242,.88) 62%, rgba(251,248,242,0) 100%);
  pointer-events: none;
}
.topbar > * { pointer-events: auto; }

.brand { display: flex; align-items: center; gap: 9px; }
.brand-mark {
  width: 26px; height: 26px; flex: none;
  border-radius: 7px;
  background: linear-gradient(145deg, var(--sand) 0%, var(--sand-deep) 100%);
  box-shadow: inset 0 0 0 1.5px rgba(29,39,51,.16);
}
.brand-text {
  font-weight: 650;
  letter-spacing: -.015em;
  line-height: 1.05;
  display: flex; flex-direction: column;
}
.brand-sub {
  font-size: 10.5px;
  font-weight: 550;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.modes {
  display: flex;
  background: rgba(255,255,255,.9);
  border: 1px solid rgba(29,39,51,.1);
  border-radius: 999px;
  padding: 3px;
  box-shadow: var(--shadow);
}
.mode {
  position: relative;   /* anchors the first-visit hint dot */
  appearance: none;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 13px;
  font-weight: 560;
  color: var(--ink-soft);
  padding: 7px 15px;
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
  transition: background .16s, color .16s;
}
.mode:hover { color: var(--ink); }
.mode.is-active { background: var(--ink); color: #fff; }

/* ── "Explore the area" is easy to miss, so it pulses gently on a guest's
   first visit. It stops the moment they touch either tab, and never returns
   once they have opened it — a permanently blinking button reads as an ad. */
@keyframes sc-hint-ring {
  0%, 100% { box-shadow: 0 0 0 0 rgba(217,119,6,0); }
  45%      { box-shadow: 0 0 0 5px rgba(217,119,6,.26); }
}
@keyframes sc-hint-dot {
  0%, 100% { transform: scale(1);   opacity: 1; }
  45%      { transform: scale(1.5); opacity: .55; }
}

.mode.is-hinting {
  color: var(--ink);
  background: #fff;
  animation: sc-hint-ring 1.9s ease-in-out 1.2s infinite;
}
.mode.is-hinting::after {
  content: "";
  position: absolute;
  top: 5px; right: 7px;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--villa);
  animation: sc-hint-dot 1.9s ease-in-out 1.2s infinite;
}

/* Respect a reduced-motion preference: keep the dot, drop the movement. */
@media (prefers-reduced-motion: reduce) {
  .mode.is-hinting,
  .mode.is-hinting::after { animation: none; }
  .mode.is-hinting { box-shadow: 0 0 0 3px rgba(217,119,6,.22); }
}

/* ───────────────────────────────── panel ─────────────────────────────────── */

.panel {
  position: absolute;
  z-index: 480;
  top: 66px; left: 16px;
  width: var(--panel-w);
  max-height: calc(100% - 92px);
  overflow-y: auto;
  overscroll-behavior: contain;
  background: rgba(251,248,242,.96);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(29,39,51,.09);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 14px;
  transition: transform .28s cubic-bezier(.4,0,.2,1), opacity .2s;
}
.panel.is-collapsed { transform: translateX(calc(-100% - 24px)); opacity: 0; pointer-events: none; }

.panel-toggle {
  position: absolute;
  z-index: 490;
  top: 74px; left: 16px;
  display: none;
  align-items: center;
  gap: 6px;
  appearance: none;
  border: 1px solid rgba(29,39,51,.1);
  background: rgba(251,248,242,.96);
  border-radius: 999px;
  box-shadow: var(--shadow);
  font: inherit; font-size: 13px; font-weight: 560;
  padding: 8px 14px;
  cursor: pointer;
}
.panel-toggle.is-shown { display: flex; }

.view.is-hidden { display: none; }

/* Bottom-sheet grabber. Mobile only — on desktop the panel is a sidebar. */
.grabber {
  display: none;
  appearance: none;
  border: 0;
  background: transparent;
  width: 100%;
  padding: 0 0 10px;
  cursor: pointer;
}
.grabber span {
  display: block;
  width: 38px; height: 4px;
  margin: 0 auto;
  border-radius: 2px;
  background: rgba(29,39,51,.24);
}

/* ─────────────────────────── destination picker ──────────────────────────── */

.pick { display: grid; gap: 6px; margin-bottom: 14px; }

.pick-btn {
  display: grid;
  grid-template-columns: 12px 1fr auto;
  align-items: center;
  gap: 10px;
  appearance: none;
  text-align: left;
  font: inherit;
  background: #fff;
  border: 1.5px solid rgba(29,39,51,.09);
  border-radius: 10px;
  padding: 11px 13px;
  cursor: pointer;
  transition: border-color .16s, box-shadow .16s, background .16s;
}
.pick-btn:hover { border-color: rgba(29,39,51,.22); }
.pick-btn.is-active { border-color: var(--ink); box-shadow: 0 0 0 3px rgba(29,39,51,.07); }

.pick-dot { width: 12px; height: 12px; border-radius: 50%; }
.pick-dot[data-dot="villa"]      { background: var(--villa); }
.pick-dot[data-dot="beachhouse"] { background: var(--bh); }
.pick-dot[data-dot="both"]       { background: linear-gradient(135deg, var(--villa) 50%, var(--bh) 50%); }

.pick-name { font-weight: 580; letter-spacing: -.01em; }
.pick-meta { font-size: 12.5px; color: var(--ink-soft); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ────────────────────────── follow-me / live nav ────────────────────────── */

.is-hidden { display: none !important; }

.follow-btn {
  display: grid;
  grid-template-columns: 20px 1fr;
  grid-template-rows: auto auto;
  column-gap: 11px;
  align-items: center;
  width: 100%;
  appearance: none;
  text-align: left;
  font: inherit;
  background: var(--ink);
  color: #fff;
  border: 0;
  border-radius: 11px;
  padding: 12px 14px;
  margin-bottom: 14px;
  cursor: pointer;
  transition: background .16s;
}
.follow-btn:hover { background: #2c3a4b; }

.follow-ico {
  grid-row: 1 / 3;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: #fff;
  position: relative;
}
.follow-ico::after {
  content: "";
  position: absolute; inset: 5px;
  border-radius: 50%;
  background: #2563eb;
}

.live {
  background: #fff;
  border: 1.5px solid var(--ink);
  border-radius: 12px;
  padding: 13px 14px;
  margin-bottom: 14px;
  box-shadow: 0 0 0 3px rgba(29,39,51,.06);
}

.live-alert {
  border-radius: 8px;
  padding: 10px 11px;
  margin-bottom: 11px;
  font-size: 13px;
  font-weight: 550;
  line-height: 1.42;
}
.live-alert.fork  { background: #fef3c7; color: #78350f; border: 1px solid #fcd34d; }
.live-alert.warn  { background: #fee2e2; color: #7f1d1d; border: 1px solid #fca5a5; }
.live-alert.good  { background: #dcfce7; color: #14532d; border: 1px solid #86efac; }
.live-alert.error { background: #f1f5f9; color: #334155; border: 1px solid #cbd5e1; }

.alert-action {
  display: block;
  margin-top: 9px;
  appearance: none;
  font: inherit; font-size: 12.5px; font-weight: 600;
  background: currentColor;
  border: 0;
  border-radius: 999px;
  padding: 6px 13px;
  cursor: pointer;
}
.alert-action { color: inherit; }
.live-alert.warn .alert-action { background: #7f1d1d; color: #fff; }
.live-alert.fork .alert-action { background: #78350f; color: #fff; }

.live-top { display: flex; align-items: baseline; gap: 10px; }
.live-big {
  font-size: 30px;
  font-weight: 650;
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
  line-height: 1.05;
}
.live-eta { font-size: 13px; color: var(--ink-soft); }
.live-next { font-size: 13.5px; margin-top: 6px; font-weight: 550; letter-spacing: -.005em; }

.live-foot {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 11px;
  padding-top: 10px;
  border-top: 1px solid rgba(29,39,51,.1);
}
.live-acc { font-size: 11.5px; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.live-stop {
  appearance: none;
  font: inherit; font-size: 12.5px; font-weight: 560;
  background: transparent;
  color: var(--ink-soft);
  border: 1px solid rgba(29,39,51,.16);
  border-radius: 999px;
  padding: 5px 13px;
  cursor: pointer;
}
.live-stop:hover { color: var(--ink); border-color: rgba(29,39,51,.4); }

/* The blue "you are here" dot. */
.sc-me {
  width: 20px; height: 20px;
  border-radius: 50%;
  background: rgba(37,99,235,.28);
  display: grid; place-items: center;
}
.sc-me span {
  width: 13px; height: 13px;
  border-radius: 50%;
  background: #2563eb;
  border: 2.5px solid #fff;
  box-shadow: 0 1px 5px rgba(0,0,0,.4);
}

.recenter {
  position: absolute;
  z-index: 485;
  right: 12px; bottom: 178px;
  width: 38px; height: 38px;
  display: grid; place-items: center;
  appearance: none;
  background: rgba(251,248,242,.96);
  border: 1px solid rgba(29,39,51,.12);
  border-radius: 10px;
  box-shadow: var(--shadow);
  cursor: pointer;
}
.recenter span {
  width: 14px; height: 14px;
  border-radius: 50%;
  border: 3px solid #2563eb;
}
.recenter.is-off span { border-color: var(--ink-soft); }

/* ───────────────────────────────── steps ────────────────────────────────── */

.steps { margin-bottom: 14px; }

.step-head {
  font-size: 11px;
  font-weight: 620;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0 0 8px 2px;
}

.step {
  position: relative;
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 11px;
  padding: 0 0 15px 0;
}
.step:last-child { padding-bottom: 0; }

/* connecting spine */
.step:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 10.5px; top: 21px; bottom: 1px;
  width: 2px;
  background: rgba(29,39,51,.13);
  border-radius: 2px;
}
.step[data-branch="villa"]:not(:last-child)::before      { background: var(--villa); opacity: .45; }
.step[data-branch="beachhouse"]:not(:last-child)::before { background: var(--bh); opacity: .45; }

.step-pin {
  width: 22px; height: 22px;
  border-radius: 50%;
  display: grid; place-items: center;
  font-size: 11px; font-weight: 680;
  background: var(--ink); color: #fff;
  z-index: 1;
}
.step[data-branch="villa"] .step-pin      { background: var(--villa); }
.step[data-branch="beachhouse"] .step-pin { background: var(--bh); }
.step[data-kind="fork"] .step-pin         { background: #fff; color: var(--ink); box-shadow: inset 0 0 0 2px var(--ink); }

.step-body { padding-top: 1px; }
.step-title { font-weight: 570; letter-spacing: -.005em; }
.step-note { font-size: 13px; color: var(--ink-soft); margin-top: 2px; }
.step-dist {
  font-size: 12px; color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
  margin-top: 3px;
}

/* ─────────────────────────────── callout ────────────────────────────────── */

.callout {
  background: linear-gradient(160deg, #fff8e8 0%, #fdf3e0 100%);
  border: 1px solid rgba(217,119,6,.24);
  border-radius: 11px;
  padding: 12px 13px;
  margin-bottom: 12px;
}
.callout strong { display: block; font-size: 13px; letter-spacing: -.005em; margin-bottom: 4px; }
.callout p { margin: 0; font-size: 13px; line-height: 1.48; color: #6b4a12; }
.callout em { font-style: normal; font-weight: 600; color: #7c3f04; }

.mini {
  appearance: none;
  margin-top: 9px;
  font: inherit; font-size: 12.5px; font-weight: 560;
  background: var(--ink); color: #fff;
  border: 0; border-radius: 999px;
  padding: 6px 13px;
  cursor: pointer;
}
.mini:hover { background: #2c3a4b; }

/* ──────────────────────────────── links ─────────────────────────────────── */

.links { display: grid; gap: 6px; }
.link-btn {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px;
  font-size: 13px; font-weight: 550;
  text-decoration: none;
  color: var(--ink);
  background: #fff;
  border: 1px solid rgba(29,39,51,.1);
  border-radius: 9px;
  padding: 10px 12px;
  transition: border-color .16s;
}
.link-btn:hover { border-color: rgba(29,39,51,.28); }
.link-btn span:last-child { color: var(--ink-soft); font-size: 12px; }

/* ──────────────────────────────── explore ──────────────────────────────── */

.lede { margin: 2px 2px 13px; font-size: 13.5px; color: var(--ink-soft); }

.filters { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 12px; }
.chip {
  appearance: none;
  font: inherit; font-size: 12.5px; font-weight: 550;
  background: #fff;
  border: 1px solid rgba(29,39,51,.12);
  border-radius: 999px;
  padding: 6px 12px;
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
}
.chip.is-on { background: var(--ink); border-color: var(--ink); color: #fff; }

.poi-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.poi-group {
  font-size: 11px; font-weight: 620; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-soft);
  margin: 12px 0 5px 2px;
}
.poi-group:first-child { margin-top: 0; }

.poi {
  display: grid;
  grid-template-columns: 9px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  cursor: pointer;
  transition: background .14s;
}
.poi:hover { background: rgba(29,39,51,.055); }
.poi-swatch { width: 9px; height: 9px; border-radius: 50%; }
.poi-name { font-size: 13.5px; }
.poi-time { font-size: 12px; color: var(--ink-soft); font-variant-numeric: tabular-nums; white-space: nowrap; }

.foot { font-size: 11.5px; color: var(--ink-soft); margin: 14px 2px 2px; }

/* ──────────────────────────────── legend ───────────────────────────────── */

.legend {
  position: absolute;
  z-index: 470;
  right: 12px;
  bottom: 104px;   /* clears the zoom control stacked below it */
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: rgba(251,248,242,.94);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(29,39,51,.09);
  border-radius: 10px;
  box-shadow: var(--shadow);
  padding: 10px 12px;
  font-size: 12px;
}
.legend-row { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.legend-line { width: 20px; height: 4px; border-radius: 2px; flex: none; }

/* ─────────────────────────── map marker styling ────────────────────────── */

.sc-pin {
  display: grid;
  place-items: center;
  width: 30px; height: 30px;
  border-radius: 50% 50% 50% 6px;
  transform: rotate(-45deg);
  border: 2.5px solid #fff;
  box-shadow: 0 2px 7px rgba(0,0,0,.42);
}
.sc-pin i {
  transform: rotate(45deg);
  font-style: normal;
  font-size: 13px;
  line-height: 1;
}
.sc-pin.villa      { background: var(--villa); }
.sc-pin.beachhouse { background: var(--bh); }
.sc-pin.airport    { background: var(--ink); }

.sc-fork {
  width: 17px; height: 17px;
  border-radius: 50%;
  background: #fff;
  border: 3.5px solid var(--ink);
  box-shadow: 0 1px 5px rgba(0,0,0,.4);
}

.sc-poi {
  width: 11px; height: 11px;
  border-radius: 50%;
  border: 2px solid #fff;
  box-shadow: 0 1px 4px rgba(0,0,0,.45);
}
.sc-poi.beach  { background: #38bdf8; }
.sc-poi.eat    { background: #f43f5e; }
.sc-poi.shop   { background: #a855f7; }
.sc-poi.care   { background: #22c55e; }
.sc-poi.travel { background: #1d2733; }

.sc-label {
  background: rgba(251,248,242,.94);
  border: 1px solid rgba(29,39,51,.12);
  border-radius: 6px;
  padding: 2.5px 7px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: -.005em;
  color: var(--ink);
  white-space: nowrap;
  box-shadow: 0 1px 5px rgba(0,0,0,.2);
}

/* Keep the layers control clear of the mode switcher in the top bar. */
.leaflet-top.leaflet-right { margin-top: 56px; }

.leaflet-popup-content-wrapper { border-radius: 10px; }
.leaflet-popup-content { margin: 11px 13px; font-size: 13px; }
.leaflet-popup-content b { letter-spacing: -.005em; }
.leaflet-container { font: inherit; }
.leaflet-control-attribution { font-size: 10px; }

/* ──────────────────────────────── mobile ───────────────────────────────── */

@media (max-width: 760px) {
  :root { --panel-w: auto; }

  .topbar { padding: 10px 12px; padding-top: max(10px, env(safe-area-inset-top)); }
  .brand-text { font-size: 14px; }
  .mode { padding: 7px 12px; font-size: 12.5px; }

  .panel {
    top: auto;
    left: 0; right: 0;
    bottom: 0;
    width: auto;
    max-height: 50%;
    border-radius: 16px 16px 0 0;
    border-bottom: 0;
    padding: 14px 14px max(14px, env(safe-area-inset-bottom));
  }
  .panel.is-collapsed { transform: translateY(calc(100% + 24px)); }

  .panel-toggle {
    top: auto;
    bottom: max(14px, env(safe-area-inset-bottom));
    left: 50%;
    transform: translateX(-50%);
  }

  .grabber { display: block; }

  /* No legend on a phone. It sat exactly where the two houses fall, and the
     panel already carries the same colour coding on the destination buttons
     and the step spines. The map area is far more valuable than the key. */
  .legend { display: none; }

  /* Pinch-to-zoom covers this on touch, and the panel would sit on top of it. */
  .leaflet-control-zoom { display: none; }
  .recenter { bottom: auto; top: 108px; right: 10px; }
  .leaflet-top.leaflet-right { margin-top: 50px; }
}

@media (max-width: 400px) {
  .brand-text { display: none; }
}

/* ─────────────────────── guide list (explore view) ──────────────────────── */

.poi { grid-template-columns: 9px 1fr auto; align-items: start; }
.poi-mid { min-width: 0; }
.poi-swatch { margin-top: 5px; }

.poi-name { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-weight: 550; }

.poi-rank {
  display: grid; place-items: center;
  width: 17px; height: 17px;
  border-radius: 50%;
  background: var(--ink); color: #fff;
  font-size: 10.5px; font-weight: 650;
  flex: none;
}
.poi-badge {
  font-size: 10px; font-weight: 620; letter-spacing: .04em; text-transform: uppercase;
  background: var(--sand); color: #6b5836;
  border-radius: 4px; padding: 2px 6px;
}
.poi-star {
  font-size: 11.5px; font-weight: 620;
  color: #b45309;
  white-space: nowrap;
}
.poi-sub { font-size: 12px; color: var(--ink-soft); margin-top: 2px; line-height: 1.4; }
.poi-time { padding-top: 2px; }

.poi-tier {
  font-size: 11px; font-weight: 600; letter-spacing: .05em;
  color: var(--ink-soft);
  margin: 9px 0 3px 2px;
}

/* popups */
.pop-badge {
  font-size: 10px; font-weight: 620; text-transform: uppercase; letter-spacing: .04em;
  background: var(--sand); color: #6b5836; border-radius: 4px; padding: 1px 5px;
}
.pop-rating { font-weight: 650; color: #b45309; }
.pop-sub { color: var(--ink-soft); font-size: 12px; }
.pop-blurb { margin-top: 6px; line-height: 1.45; }
.pop-good { margin-top: 5px; font-size: 12px; color: var(--ink-soft); }
.pop-approx {
  margin-top: 6px; font-size: 11.5px; color: #7f1d1d;
  background: #fee2e2; border-radius: 5px; padding: 4px 6px;
}

/* Hollow marker = village-level pin, exact address unknown. */
.sc-poi.approx { background: #fff !important; }
.sc-poi.boat { background: #8b5cf6; }

/* ───────────────────── "Navigate home" — the primary CTA ─────────────────── */

.home { display: grid; gap: 8px; margin-bottom: 15px; }

.home-btn {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 13px;
  padding: 11px 14px 11px 13px;
  background: #fff;
  border: 1px solid rgba(29,39,51,.10);
  border-left-width: 3px;
  border-radius: 12px;
  text-decoration: none;
  color: var(--ink);
  box-shadow: 0 1px 2px rgba(20,28,38,.05), 0 5px 16px rgba(20,28,38,.07);
  transition: transform .14s, box-shadow .14s, border-color .14s;
}
.home-btn:hover { transform: translateY(-1px); box-shadow: 0 2px 5px rgba(20,28,38,.07), 0 12px 26px rgba(20,28,38,.13); }
.home-btn:active { transform: translateY(0); }
.home-btn.villa { border-left-color: var(--villa); }
.home-btn.bh    { border-left-color: var(--bh); }
.home-btn.villa:hover { border-color: rgba(217,119,6,.45); border-left-color: var(--villa); }
.home-btn.bh:hover    { border-color: rgba(13,148,136,.45); border-left-color: var(--bh); }

.home-logo { height: 34px; width: auto; display: block; flex: none; }

.home-text { min-width: 0; }
.home-lead {
  display: block;
  font-size: 14px; font-weight: 640; letter-spacing: -.015em;
  line-height: 1.2;
  /* One line, always. The old stacked pills wrapped to three. */
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.home-sub {
  display: block;
  font-size: 11.5px; color: var(--ink-soft);
  margin-top: 2px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.home-arrow {
  width: 8px; height: 8px;
  border-top: 2px solid; border-right: 2px solid;
  transform: rotate(45deg);
  margin-right: 3px;
  flex: none;
}
.home-btn.villa .home-arrow { color: var(--villa); }
.home-btn.bh .home-arrow    { color: var(--bh); }

.home-hint { margin: 3px 2px 0; font-size: 11.5px; line-height: 1.45; color: var(--ink-soft); }

/* ── Follow-me: demoted. The Navigate buttons hand off to Google Maps with
   turn-by-turn voice, which is the better tool for actually driving. This
   stays for a passenger who wants to watch progress without leaving the page. */
.follow-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  margin-top: 12px;
  appearance: none;
  background: transparent;
  border: 1px solid rgba(29,39,51,.14);
  border-radius: 9px;
  padding: 9px 12px;
  font: inherit; font-size: 12.5px; font-weight: 550;
  color: var(--ink-soft);
  cursor: pointer;
  transition: color .15s, border-color .15s;
}
.follow-btn:hover { color: var(--ink); border-color: rgba(29,39,51,.32); }
.follow-ico {
  width: 13px; height: 13px; flex: none;
  border-radius: 50%;
  border: 2px solid #2563eb;
}

/* ───────────────────── property logo markers on the map ─────────────────── */

.sc-logo {
  background: rgba(255,255,255,.96);
  border-radius: 10px;
  padding: 5px 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,.30);
  position: relative;
}
.sc-logo img { height: 30px; width: auto; display: block; }
/* No pointer: the badge is deliberately offset and the coloured dot marks the
   true position of the house. */
.sc-logo.villa { box-shadow: 0 2px 8px rgba(0,0,0,.30), 0 0 0 2px var(--villa); }
.sc-logo.beachhouse { box-shadow: 0 2px 8px rgba(0,0,0,.30), 0 0 0 2px var(--bh); }

.sc-poi.history { background: #b45309; }
.sc-poi.shop { background: #a855f7; }

@media (max-width: 760px) {
  /* Stacked full-width rows on a phone: one line of text each, equal heights,
     no wrapping. The side-by-side pills wrapped to three lines and looked cheap. */
  .home-logo { height: 30px; }
  .home-lead { font-size: 13.5px; }
  .home-btn { gap: 10px; padding-left: 11px; }
}

/* Shown only when the basemap tiles fail — better than a blank screen. */
.tile-warn {
  position: absolute;
  z-index: 495;
  left: 50%; top: 64px;
  transform: translateX(-50%);
  max-width: min(420px, calc(100% - 24px));
  appearance: none;
  font: inherit; font-size: 13px; font-weight: 550; text-align: center;
  background: #fef3c7; color: #78350f;
  border: 1px solid #fcd34d;
  border-radius: 9px;
  padding: 9px 14px;
  box-shadow: var(--shadow);
  cursor: pointer;
}