/* ============================================================
 * Locations map + sales decks (/contact/)
 * Black Leaflet map. Illinois and Texas lit up, one dot per state.
 * State dot -> that state's location dots -> satellite zoom + deck.
 * Always dark, whatever the site theme.
 * ============================================================ */

.locations-map.lm {
  --lm-yellow: #ffda00;
  --lm-bg: #0b0b0c;
  --lm-panel: #121214;
  --lm-panel-2: #1a1a1d;
  --lm-line: rgba(255, 255, 255, 0.1);
  --lm-text: #f5f5f5;
  --lm-muted: #a4a4aa;
  --lm-display: 'Archivo Black', 'Archivo', system-ui, sans-serif;
  height: 620px;
  background: var(--lm-bg);
  color: var(--lm-text);
  font-family: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  border: 1px solid var(--lm-line);
}
.lm .leaflet-container, .lm-map { position: absolute; inset: 0; background: var(--lm-bg); font-family: inherit; }
.lm-map { z-index: 0; }

/* Esri dark gray canvas pushed down to near-black */
.lm-dark { filter: brightness(0.62) contrast(1.15); }

/* satellite fades in over the black map */
.lm-sat { transition: opacity 0.8s ease; }

/* the two states */
.lm-state { transition: fill-opacity 0.2s ease, stroke-width 0.2s ease; filter: drop-shadow(0 0 6px rgba(255, 218, 0, 0.55)); }
.lm--us .lm-state:hover { fill-opacity: 0.16; }
/* inside a state the outline is scenery: no highlight, no hand cursor */
.lm:not(.lm--us) .lm-state { cursor: grab; }

/* ----- dots ----- */
.lm-dot { position: relative; width: 22px; height: 22px; border-radius: 50%; background: var(--lm-yellow);
  border: 3px solid #111; box-shadow: 0 0 0 2px rgba(255, 218, 0, 0.35), 0 4px 10px rgba(0, 0, 0, 0.6);
  cursor: pointer; transition: transform 0.15s ease; }
.lm-dot:hover, .lm-dot:focus-visible { transform: scale(1.15); outline: none; }
.lm-dot--count { width: 30px; height: 30px; display: grid; place-items: center; color: #111; font-weight: 800; font-size: 13px; }
.lm-dot--on { width: 30px; height: 30px; box-shadow: 0 0 0 8px rgba(255, 218, 0, 0.3), 0 4px 14px rgba(0, 0, 0, 0.7); }

.lm-hub { position: relative; width: 34px; height: 34px; border-radius: 50%; background: var(--lm-yellow);
  border: 4px solid #111; cursor: pointer; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.6); }
.lm-hub::before { content: ""; position: absolute; inset: -12px; border-radius: 50%; border: 2px solid var(--lm-yellow);
  opacity: 0; animation: lm-pulse 2.2s ease-out infinite; }
@keyframes lm-pulse { 0% { transform: scale(0.6); opacity: 0.9; } 100% { transform: scale(1.5); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .lm-hub::before { animation: none; opacity: 0.5; } }
.lm-hub-label { position: absolute; left: 44px; top: 50%; transform: translateY(-50%); white-space: nowrap;
  font-family: var(--lm-display); font-size: 15px; letter-spacing: 0.04em; text-transform: uppercase; color: #fff;
  text-shadow: 0 1px 3px #000, 0 0 10px #000; pointer-events: none; }
.lm-hub-label small { display: block; font-family: 'Archivo', sans-serif; font-size: 12px; letter-spacing: 0.02em;
  text-transform: none; color: var(--lm-yellow); font-weight: 700; }
.lm-hub:focus-visible { outline: 3px solid #fff; outline-offset: 4px; }

.lm .leaflet-tooltip.lm-tip { background: #111; color: #fff; border: 1px solid rgba(255, 218, 0, 0.45); border-radius: 6px;
  font-weight: 700; font-size: 12px; padding: 4px 8px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5); }
.lm .leaflet-tooltip.lm-tip::before { display: none; }

/* ----- top bar: breadcrumb + search ----- */
.lm-bar { position: absolute; top: 14px; left: 14px; z-index: 500; display: flex; gap: 8px; align-items: flex-start;
  max-width: calc(100% - 28px); flex-wrap: wrap; }
.lm-crumbs, .lm-find input { background: rgba(14, 14, 16, 0.9); border: 1px solid var(--lm-line); border-radius: 8px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45); }
.lm-crumbs { display: flex; align-items: center; min-height: 38px; padding: 0 6px; font-size: 13px; }
.lm-crumbs button { background: none; border: 0; color: var(--lm-muted); font: inherit; font-weight: 700; padding: 8px 6px; cursor: pointer; }
.lm-crumbs button:hover { color: var(--lm-yellow); }
/* the state you are currently in, when it is still a button (location level) */
.lm-crumbs button[aria-current="true"] { color: #fff; }
.lm-crumbs span[aria-current] { color: #fff; font-weight: 700; padding: 8px 6px; }
.lm-crumbs i { color: #555; font-style: normal; }
.lm-back { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 14px 0 11px; border: 0; border-radius: 8px;
  background: var(--lm-yellow); color: #111; font: inherit; font-size: 14px; font-weight: 800; cursor: pointer;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45); }
.lm-back[hidden] { display: none; }
.lm-back:hover { background: #ffe445; }
.lm-back:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.lm-back svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.lm-find { position: relative; }

/* touch screens: shown briefly when someone drags the map with one finger */
.lm-hint { position: absolute; inset: 0; z-index: 650; display: grid; place-items: center; padding: 24px; text-align: center;
  background: rgba(0, 0, 0, 0.55); color: #fff; font-size: 17px; font-weight: 800; pointer-events: none;
  opacity: 0; transition: opacity 0.25s ease; }
.lm-hint.is-on { opacity: 1; }
.lm-find input { width: 220px; height: 38px; padding: 0 12px; color: #fff; font: inherit; font-size: 13px; }
.lm-find input::placeholder { color: #8a8a90; }
.lm-find input:focus { outline: 2px solid var(--lm-yellow); outline-offset: 0; }
.lm-find ul { position: absolute; top: 42px; left: 0; width: 280px; max-height: 300px; overflow: auto; margin: 0; padding: 4px;
  list-style: none; background: var(--lm-panel); border: 1px solid var(--lm-line); border-radius: 8px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6); }
.lm-find li button { display: block; width: 100%; text-align: left; background: none; border: 0; color: #fff; font: inherit;
  padding: 8px 10px; border-radius: 6px; cursor: pointer; font-size: 13px; font-weight: 700; }
.lm-find li button small { display: block; color: var(--lm-muted); font-weight: 400; font-size: 12px; }
.lm-find li button:hover, .lm-find li button[aria-selected="true"] { background: var(--lm-panel-2); color: var(--lm-yellow); }
.lm-find li.lm-none { color: var(--lm-muted); padding: 8px 10px; font-size: 13px; }

/* chooser for dots sharing one address */
.lm-pick { position: absolute; z-index: 600; background: var(--lm-panel); border: 1px solid rgba(255, 218, 0, 0.45);
  border-radius: 8px; padding: 4px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6); transform: translate(-50%, calc(-100% - 22px)); }
.lm-pick button { display: block; width: 100%; white-space: nowrap; text-align: left; background: none; border: 0; color: #fff;
  font: inherit; font-size: 13px; font-weight: 700; padding: 8px 12px; border-radius: 6px; cursor: pointer; }
.lm-pick button:hover { background: var(--lm-panel-2); color: var(--lm-yellow); }

/* ----- zoom buttons ----- */
.lm .leaflet-bar { border: 1px solid var(--lm-line) !important; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45) !important; }
.lm .leaflet-bar a { background: #141416; color: #f5f5f5; border-color: #2a2a2e; }
.lm .leaflet-bar a:hover { background: #222; color: var(--lm-yellow); }
.lm .leaflet-control-attribution { background: rgba(0, 0, 0, 0.6) !important; color: #999 !important; font-size: 10px; }
.lm .leaflet-control-attribution a { color: #ccc !important; }

/* ----- sales deck ----- */
.lm-deck { position: absolute; top: 0; right: 0; bottom: 0; z-index: 700; width: min(470px, 48%);
  display: flex; flex-direction: column; background: var(--lm-panel); border-left: 1px solid var(--lm-line);
  box-shadow: -16px 0 40px rgba(0, 0, 0, 0.5); transform: translateX(102%); transition: transform 0.45s ease; }
.lm-deck.is-open { transform: none; }
.lm-deck-head { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--lm-line); }
.lm-deck-head strong { flex: 1; min-width: 0; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lm-deck-head small { color: var(--lm-muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.lm-deck-head button { width: 34px; height: 34px; display: grid; place-items: center; background: var(--lm-panel-2);
  border: 1px solid var(--lm-line); border-radius: 8px; color: #fff; cursor: pointer; font-size: 18px; line-height: 1; }
.lm-deck-head button:hover:not(:disabled) { color: var(--lm-yellow); border-color: rgba(255, 218, 0, 0.5); }
.lm-deck-head button:disabled { opacity: 0.35; cursor: default; }
.lm-deck-head svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

.lm-slides { flex: 1; min-height: 0; position: relative; overflow: hidden; }
.lm-slide { position: absolute; inset: 0; overflow-y: auto; padding: 0 0 22px; opacity: 0; visibility: hidden;
  transform: translateX(24px); transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s; }
.lm-slide.is-on { opacity: 1; visibility: visible; transform: none; }
.lm-slide-photo { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; background: #000; }
.lm-slide-body { padding: 20px 22px 0; }
.lm-slide h4 { margin: 0 0 14px; font-family: var(--lm-display); font-size: 26px; line-height: 1.05;
  text-transform: uppercase; color: var(--lm-yellow); letter-spacing: 0.01em; }
.lm-slide ul { margin: 0; padding: 0; list-style: none; }
.lm-slide li { position: relative; padding: 9px 0 9px 20px; border-bottom: 1px solid var(--lm-line); font-size: 15px; line-height: 1.4;
  min-width: 0; overflow-wrap: anywhere; }
.lm-slide li::before { content: ""; position: absolute; left: 0; top: 16px; width: 8px; height: 8px; background: var(--lm-yellow); }
.lm-slide p { color: #d6d6da; font-size: 15px; line-height: 1.5; margin: 0 0 14px; }

.lm-cover { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; padding: 28px 24px;
  background: #0b0b0c center / cover no-repeat; overflow: hidden; }
.lm-cover::before { content: ""; position: absolute; inset: 0; background: rgba(8, 8, 9, 0.62); }
.lm-cover > * { position: relative; }
.lm-cover-logo { position: absolute; top: 22px; left: 24px; height: 34px; width: auto; }
.lm-cover-addr { color: var(--lm-yellow); font-family: var(--lm-display); font-size: 15px; margin: 0 0 10px; }
.lm-cover h3 { margin: 0 0 14px; font-family: var(--lm-display); font-size: 38px; line-height: 1; text-transform: uppercase; color: #fff; }
.lm-cover p { margin: 0; color: #e2e2e6; font-size: 15px; line-height: 1.45; max-width: 36ch; }

.lm-cols { display: grid; gap: 4px 18px; min-width: 0; }
.lm-cols > *, .lm-cols li { min-width: 0; overflow-wrap: anywhere; }
.lm-cols ul + ul { margin-top: 0; }
.lm-tech { counter-reset: t; }
.lm-tech li { padding-left: 44px; min-height: 30px; display: flex; align-items: center; }
.lm-tech li::before { counter-increment: t; content: "0" counter(t); width: 32px; height: 26px; top: 50%; transform: translateY(-50%);
  display: grid; place-items: center; background: var(--lm-yellow); color: #111; font-family: var(--lm-display); font-size: 12px; border-radius: 5px; }

.lm-contact-lines { margin: 0 0 18px; display: grid; gap: 6px; font-size: 16px; min-width: 0; }
.lm-contact-lines > *, .lm-contact-lines a { min-width: 0; overflow-wrap: anywhere; }
.lm-contact-lines a { color: #fff; font-weight: 700; text-decoration: none; }
.lm-contact-lines a:hover { color: var(--lm-yellow); }
.lm-actions { display: flex; flex-wrap: wrap; gap: 8px; min-width: 0; }
.lm-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 0 16px; border-radius: 6px;
  background: var(--lm-yellow); color: #111 !important; font-weight: 800; font-size: 14px; text-decoration: none; border: 1px solid var(--lm-yellow); }
.lm-btn:hover { background: #ffe445; }
.lm-btn--ghost { background: transparent; color: var(--lm-yellow) !important; }
.lm-btn--ghost:hover { background: rgba(255, 218, 0, 0.12); }

.lm-dots { display: flex; justify-content: center; gap: 6px; padding: 10px 0 12px; border-top: 1px solid var(--lm-line); }
.lm-dots button { width: 8px; height: 8px; padding: 0; border-radius: 50%; border: 0; background: #444; cursor: pointer; }
.lm-dots button[aria-current="true"] { background: var(--lm-yellow); width: 22px; border-radius: 4px; }

@media (max-width: 1024px) { .locations-map.lm { height: 580px; } }
@media (max-width: 768px) {
  .locations-map.lm { height: 640px; }
  .lm-deck { top: auto; left: 0; width: auto; height: 64%; border-left: 0; border-top: 1px solid var(--lm-line);
    border-radius: 14px 14px 0 0; transform: translateY(102%); }
  .lm-find input { width: 170px; }
  .lm--loc .lm-find { display: none; }
  .lm-hub-label { left: 50%; top: 44px; transform: translateX(-50%); text-align: center; }
  .lm-cover h3 { font-size: 30px; }
  .lm-slide h4 { font-size: 22px; }
}

/* ----- narrow phones (Galaxy/Pixel class, 360-430px) ----- */
@media (max-width: 560px) {
  .locations-map.lm { height: 600px; }

  /* search drops to its own full-width row under the controls */
  .lm-bar { left: 10px; right: 10px; top: 10px; max-width: none; gap: 6px; }
  .lm-find { flex: 1 1 100%; }
  .lm-find input { width: 100%; }
  .lm-find ul { width: 100%; }

  .lm-back { height: 34px; padding: 0 11px 0 9px; font-size: 13px; }
  .lm-back svg { width: 16px; height: 16px; }
  .lm-crumbs { min-height: 34px; font-size: 12px; }
  .lm-crumbs button, .lm-crumbs span[aria-current] { padding: 6px 4px; }

  /* deck fills more of the screen and its type steps down */
  .lm-deck { height: 72%; }
  .lm-cover { padding: 20px 16px; }
  .lm-cover h3 { font-size: 24px; }
  .lm-cover p { font-size: 14px; }
  .lm-slide-body { padding: 16px 16px 0; }
  .lm-slide h4 { font-size: 19px; }
  .lm-slide li, .lm-slide p { font-size: 14px; }
  .lm-contact-lines { font-size: 15px; }

  /* actions go full width rather than wrapping into ragged rows */
  .lm-actions { flex-direction: column; align-items: stretch; }
  .lm-btn { width: 100%; padding: 0 12px; font-size: 13px; }
}