/* ============================================================
   QC Home and Business Project Pro's — Sample activity map
   Illustrative Quad Cities diorama + request lifecycle demo.
   ============================================================ */
.qcm {
  position: relative;
  padding: 76px 0 72px;
  background: linear-gradient(180deg, #FFFFFF 0%, #EEF2F7 100%);
  border-top: 1px solid var(--border);

  --qcm-open: #B76A00;
  --qcm-quoting: #00409C;
  --qcm-scheduled: #4A4FC4;
  --qcm-done: #0E7A5F;

  --qcm-water: #A9CDEA;
  --qcm-water-deep: #7FB2DC;
  --qcm-land: #F4F7FA;
  --qcm-land-2: #E7EDF3;
  --qcm-edge: #C9D4DF;
  --qcm-edge-dark: #B2BFCC;
  --qcm-road: #E3EAF1;
  --qcm-park: #D5E4CE;
}

.qcm__intro { max-width: 780px; }
.qcm__intro .section__subtitle { margin-bottom: 40px; }

/* ---------- Layout ---------- */
.qcm__layout {
  display: grid;
  grid-template-columns: minmax(0, 1.62fr) minmax(292px, 0.98fr);
  gap: 20px;
  align-items: stretch;
}

/* ---------- Stage ---------- */
.qcm__stage {
  position: relative;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(130% 90% at 46% -10%, #FFFFFF 0%, #EDF3F9 46%, #DCE6F0 100%);
  overflow: hidden;
  box-shadow: 0 18px 44px rgba(0, 52, 120, 0.09);
  display: flex;
  align-items: center;
  justify-content: center;
}
.qcm__svg {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 990 / 676;
  touch-action: pan-y;
}

.qcm__legend {
  position: absolute;
  right: 12px;
  bottom: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  padding: 8px 12px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid var(--border);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  pointer-events: none;
}
.qcm__legend span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.71rem;
  font-weight: 700;
  color: var(--text-secondary);
  white-space: nowrap;
}
.qcm__legend i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
}
.qcm__legend i.o { background: var(--qcm-open); }
.qcm__legend i.q { background: var(--qcm-quoting); }
.qcm__legend i.s { background: var(--qcm-scheduled); }
.qcm__legend i.d { background: var(--qcm-done); }

.qcm__hint {
  position: absolute;
  left: 12px;
  bottom: 12px;
  font-size: 0.71rem;
  font-weight: 700;
  color: var(--text-muted);
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 6px 11px;
  pointer-events: none;
}

/* ---------- Hover tooltip ---------- */
.qcm__tip {
  position: absolute;
  z-index: 6;
  width: 232px;
  padding: 12px 13px;
  border-radius: 14px;
  background: #fff;
  border: 1px solid var(--border-strong);
  box-shadow: 0 14px 34px rgba(0, 40, 90, 0.16);
  pointer-events: none;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.16s ease, transform 0.16s ease;
}
.qcm__tip.is-on { opacity: 1; transform: translateY(0); }
.qcm__tip-top {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--primary);
}
.qcm__tip-top em {
  font-style: normal;
  color: var(--text-muted);
  letter-spacing: 0.02em;
}
.qcm__tip-title {
  font-family: var(--font-display);
  font-size: 0.98rem;
  font-weight: 800;
  line-height: 1.2;
  color: var(--text-primary);
  margin-bottom: 5px;
}
.qcm__tip-desc {
  font-size: 0.78rem;
  line-height: 1.42;
  color: var(--text-secondary);
  margin-bottom: 9px;
}
.qcm__tip-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
  font-size: 0.74rem;
  font-weight: 700;
}
.qcm__tip-foot .qcm-status { font-size: 0.68rem; }
.qcm__tip-foot b { color: var(--text-primary); }

/* ---------- Status pill (shared) ---------- */
.qcm-status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 0.67rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
}
.qcm-status::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
}
.qcm-status[data-status="open"] { color: var(--qcm-open); background: rgba(183, 106, 0, 0.12); }
.qcm-status[data-status="quoting"] { color: var(--qcm-quoting); background: rgba(0, 64, 156, 0.1); }
.qcm-status[data-status="scheduled"] { color: var(--qcm-scheduled); background: rgba(74, 79, 196, 0.12); }
.qcm-status[data-status="done"] { color: var(--qcm-done); background: rgba(14, 122, 95, 0.12); }

/* ---------- Ticket panel ---------- */
.qcm__panel {
  position: relative;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: #fff;
  padding: 20px;
  box-shadow: 0 14px 34px rgba(0, 52, 120, 0.07);
}
.qcm-ticket__top {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.qcm-ticket__chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--accent-light);
  border: 1px solid rgba(0, 64, 156, 0.16);
  color: var(--primary);
  font-size: 0.7rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.qcm-ticket__ref {
  margin-left: auto;
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--text-muted);
  letter-spacing: 0.04em;
}
.qcm-ticket__city {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.74rem;
  font-weight: 700;
  color: var(--text-secondary);
}
.qcm-ticket__title {
  font-family: var(--font-display);
  font-size: 1.16rem;
  font-weight: 800;
  line-height: 1.16;
  letter-spacing: -0.02em;
  color: var(--text-primary);
  margin-bottom: 8px;
}
.qcm-ticket__desc {
  font-size: 0.86rem;
  line-height: 1.5;
  color: var(--text-secondary);
  margin-bottom: 14px;
}
.qcm-ticket__attach {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
}
.qcm-ticket__thumb {
  width: 46px;
  height: 38px;
  border-radius: 8px;
  background: linear-gradient(135deg, #E8EEF5 0%, #D8E3EE 100%);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(84, 92, 99, 0.5);
}
.qcm-ticket__attach span {
  font-size: 0.73rem;
  font-weight: 700;
  color: var(--text-muted);
}

.qcm-ticket__label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--text-muted);
  margin-bottom: 10px;
}
.qcm-ticket__count { color: var(--primary); }

.qcm-quotes {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 16px;
  min-height: 170px;
}
.qcm-quotes.is-waiting::before {
  content: "Waiting on quotes from nearby pros…";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px dashed var(--border-strong);
  border-radius: 12px;
  background: #FBFCFD;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--text-muted);
}
.qcm.is-browsing .qcm-ticket__label,
.qcm.is-browsing .qcm-quotes { display: none; }
.qcm-q {
  display: grid;
  grid-template-columns: 34px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 10px 11px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: #FBFCFD;
  opacity: 0;
  transform: translateY(8px) scale(0.98);
  transition: opacity 0.32s ease, transform 0.32s cubic-bezier(0.2, 0.9, 0.3, 1.2),
    border-color 0.3s ease, background 0.3s ease, box-shadow 0.3s ease;
}
.qcm-q.is-in { opacity: 1; transform: none; }
.qcm-q.is-out { opacity: 0.34; }
.qcm-q.is-picked {
  border-color: rgba(14, 122, 95, 0.5);
  background: rgba(14, 122, 95, 0.06);
  box-shadow: 0 6px 16px rgba(14, 122, 95, 0.12);
  opacity: 1;
}
.qcm-q__av {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: var(--primary);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.02em;
}
.qcm-q.is-picked .qcm-q__av { background: var(--qcm-done); }
.qcm-q__name {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 0.86rem;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.2;
}
.qcm-q__name svg { color: var(--qcm-done); flex-shrink: 0; }
.qcm-q__meta {
  display: block;
  font-size: 0.71rem;
  color: var(--text-muted);
  line-height: 1.35;
  margin-top: 2px;
}
.qcm-q__price {
  text-align: right;
  font-size: 0.94rem;
  font-weight: 800;
  color: var(--text-primary);
  letter-spacing: -0.01em;
}
.qcm-q__pick {
  grid-column: 1 / -1;
  display: none;
  align-items: center;
  gap: 6px;
  font-size: 0.7rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--qcm-done);
}
.qcm-q.is-picked .qcm-q__pick { display: flex; }

.qcm-ticket__foot {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 12px;
  border-radius: 12px;
  background: var(--accent-light);
  border: 1px solid rgba(0, 64, 156, 0.12);
  font-size: 0.81rem;
  line-height: 1.45;
  color: var(--text-secondary);
  min-height: 58px;
}
.qcm-ticket__foot svg { flex-shrink: 0; margin-top: 2px; color: var(--primary); }
.qcm-ticket__foot b { color: var(--text-primary); }
.qcm-ticket__foot .qcm-stars { color: #B76A00; letter-spacing: 0.05em; }

.qcm-ticket__resume {
  display: none;
  width: 100%;
  margin-top: 12px;
  padding: 11px 14px;
  border-radius: 10px;
  border: 1px solid rgba(0, 64, 156, 0.24);
  background: #fff;
  color: var(--primary);
  font-size: 0.82rem;
  font-weight: 700;
  transition: var(--transition);
}
.qcm-ticket__resume:hover { background: var(--accent-light); }
.qcm.is-browsing .qcm-ticket__resume { display: block; }

/* ---------- Rail ---------- */
.qcm__bar {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 16px;
  align-items: center;
  margin-top: 18px;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: #fff;
}
.qcm-rail {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  counter-reset: qcm;
}
.qcm-rail__step {
  position: relative;
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 8px 6px 8px 8px;
  background: none;
  border: none;
  border-radius: 10px;
  text-align: left;
  color: var(--text-muted);
  transition: var(--transition);
}
.qcm-rail__step:hover { background: var(--accent-light); color: var(--text-secondary); }
.qcm-rail__step::after {
  content: "";
  position: absolute;
  left: 100%;
  top: 21px;
  width: 8px;
  height: 2px;
  background: var(--border);
}
.qcm-rail li:last-child .qcm-rail__step::after { display: none; }
.qcm-rail__num {
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 2px solid var(--border-strong);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.74rem;
  font-weight: 800;
  transition: var(--transition);
}
.qcm-rail__label {
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
}
.qcm-rail__step.is-done { color: var(--text-secondary); }
.qcm-rail__step.is-done .qcm-rail__num {
  border-color: var(--qcm-done);
  background: var(--qcm-done);
  color: #fff;
}
.qcm-rail__step.is-now { color: var(--primary); }
.qcm-rail__step.is-now .qcm-rail__num {
  border-color: var(--primary);
  background: var(--primary);
  color: #fff;
  box-shadow: 0 0 0 5px rgba(0, 64, 156, 0.14);
}

.qcm__controls { display: flex; align-items: center; gap: 10px; }
.qcm__btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 14px;
  border-radius: 999px;
  border: 1px solid var(--border-strong);
  background: #fff;
  color: var(--text-primary);
  font-size: 0.78rem;
  font-weight: 700;
  transition: var(--transition);
}
.qcm__btn:hover { border-color: var(--primary); color: var(--primary); background: var(--accent-light); }
.qcm__btn .qcm__ico-pause { display: none; }
.qcm.is-playing .qcm__btn .qcm__ico-pause { display: block; }
.qcm.is-playing .qcm__btn .qcm__ico-play { display: none; }

.qcm__dots { display: flex; gap: 6px; }
.qcm__dot {
  width: 9px;
  height: 9px;
  padding: 0;
  border-radius: 50%;
  border: none;
  background: var(--border-strong);
  transition: var(--transition);
}
.qcm__dot.is-on { background: var(--primary); transform: scale(1.32); }

.qcm__cta { margin-top: 26px; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

/* ============================================================
   SVG diorama
   ============================================================ */
.qcm-plate-top { fill: var(--qcm-land); }
.qcm-plate-l { fill: var(--qcm-edge); }
.qcm-plate-r { fill: var(--qcm-edge-dark); }
.qcm-plate-line { fill: none; stroke: rgba(84, 92, 99, 0.16); stroke-width: 1.4; }
.qcm-plate-shadow { fill: rgba(0, 40, 90, 0.2); }

.qcm-park { fill: var(--qcm-park); }
.qcm-field { stroke: rgba(84, 92, 99, 0.08); stroke-width: 1; }

.qcm-river { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.qcm-river--bank { stroke: #CBDFF0; stroke-width: 62; }
.qcm-river--body { stroke: var(--qcm-water); stroke-width: 46; }
.qcm-river--deep { stroke: var(--qcm-water-deep); stroke-width: 24; opacity: 0.55; }
.qcm-river--flow {
  stroke: rgba(255, 255, 255, 0.75);
  stroke-width: 3;
  stroke-dasharray: 26 52;
  animation: qcm-flow 3.6s linear infinite;
}
.qcm-river--flow2 {
  stroke: rgba(255, 255, 255, 0.45);
  stroke-width: 2;
  stroke-dasharray: 14 70;
  animation: qcm-flow 5.2s linear infinite;
}
.qcm-rock { fill: none; stroke-linecap: round; }
.qcm-rock--body { stroke: var(--qcm-water); stroke-width: 22; }
.qcm-rock--flow {
  stroke: rgba(255, 255, 255, 0.6);
  stroke-width: 2;
  stroke-dasharray: 18 48;
  animation: qcm-flow 4.4s linear infinite;
}
@keyframes qcm-flow { to { stroke-dashoffset: -78; } }

.qcm-road { fill: none; stroke: var(--qcm-road); stroke-width: 9; stroke-linecap: round; }
.qcm-road--sm { stroke-width: 6; }
.qcm-road-line {
  fill: none;
  stroke: #fff;
  stroke-width: 1.6;
  stroke-dasharray: 9 11;
  stroke-linecap: round;
}
.qcm-bridge { fill: none; stroke: #F7FAFC; stroke-width: 12; stroke-linecap: butt; }
.qcm-bridge-rail { fill: none; stroke: rgba(84, 92, 99, 0.3); stroke-width: 1.2; }

.qcm-ground-label {
  fill: rgba(84, 92, 99, 0.17);
  font-family: var(--font-display);
  font-size: 46px;
  font-weight: 800;
  letter-spacing: 10px;
  text-anchor: middle;
}
.qcm-river-label {
  fill: rgba(0, 64, 156, 0.4);
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 800;
  letter-spacing: 4px;
}
.qcm-river-label--sm { font-size: 14px; letter-spacing: 3px; fill: rgba(0, 64, 156, 0.34); }

/* --- buildings --- */
.qcm-wt { fill: #FDFEFE; }
.qcm-wl { fill: #E2E9F0; }
.qcm-wr { fill: #CBD6E1; }
.qcm-roof-a { fill: #6E8AA8; }
.qcm-roof-b { fill: #55738F; }
.qcm-glass { fill: rgba(0, 64, 156, 0.16); }
.qcm-band { fill: var(--primary); opacity: 0.85; }
.qcm-trunk { fill: #8A7256; }
.qcm-leaf-a { fill: #7FA476; }
.qcm-leaf-b { fill: #6C9163; }
.qcm-shadow { fill: rgba(20, 40, 66, 0.13); }
.qcm-wt-legs { fill: none; stroke: #A9B7C4; stroke-width: 2.4; stroke-linecap: round; }
.qcm-wt-text {
  fill: var(--primary);
  font-family: var(--font-display);
  font-size: 9px;
  font-weight: 800;
  text-anchor: middle;
  letter-spacing: 0.5px;
}
.qcm-city__name {
  fill: var(--text-secondary);
  font-family: var(--font-sans);
  font-size: 19px;
  font-weight: 700;
  text-anchor: middle;
  letter-spacing: 0.02em;
  paint-order: stroke;
  stroke: rgba(255, 255, 255, 0.9);
  stroke-width: 3.4;
  stroke-linejoin: round;
}
.qcm-city__name--sm { font-size: 16px; fill: var(--text-muted); }

/* --- routes / connectors / tokens --- */
.qcm-route {
  fill: none;
  stroke: var(--primary);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-dasharray: 10 9;
  opacity: 0;
  transition: opacity 0.4s ease;
}
.qcm-route.is-on { opacity: 0.75; }
.qcm-route-halo {
  fill: none;
  stroke: rgba(0, 64, 156, 0.14);
  stroke-width: 11;
  stroke-linecap: round;
  opacity: 0;
  transition: opacity 0.4s ease;
}
.qcm-route-halo.is-on { opacity: 1; }

.qcm-conn {
  stroke: var(--primary);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 7 7;
  opacity: 0;
  transition: opacity 0.4s ease;
}
.qcm-conn.is-on { opacity: 0.5; }
.qcm-conn.is-off { opacity: 0.1; }

.qcm-token { opacity: 0; transition: opacity 0.2s ease; }
.qcm-token.is-on { opacity: 1; }
.qcm-token-bg { fill: var(--primary); }
.qcm-token-txt {
  fill: #fff;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 800;
  text-anchor: middle;
}

.qcm-ripple {
  fill: none;
  stroke: var(--qcm-open);
  stroke-width: 3;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
}
.qcm-ripple.is-on { animation: qcm-ripple 1.5s ease-out 2; }
@keyframes qcm-ripple {
  0% { opacity: 0.85; transform: scale(0.25); }
  100% { opacity: 0; transform: scale(2.6); }
}

/* --- pro markers --- */
.qcm-pro { opacity: 0; transition: opacity 0.35s ease; }
.qcm-pro.is-on { opacity: 1; }
.qcm-pro__in {
  transform-box: fill-box;
  transform-origin: center bottom;
  transform: scale(0.6);
  transition: transform 0.4s cubic-bezier(0.2, 0.9, 0.3, 1.35);
}
.qcm-pro.is-on .qcm-pro__in { transform: scale(1); }
.qcm-pro.is-dim { opacity: 0.4; }
.qcm-pro.is-gone { opacity: 0; }
.qcm-pro-card { fill: #fff; stroke: var(--border-strong); stroke-width: 1.2; }
.qcm-pro.is-pick .qcm-pro-card { stroke: var(--qcm-done); stroke-width: 2.4; }
.qcm-pro-av { fill: var(--primary); }
.qcm-pro.is-pick .qcm-pro-av { fill: var(--qcm-done); }
.qcm-pro-ini {
  fill: #fff;
  font-family: var(--font-sans);
  font-size: 11.5px;
  font-weight: 800;
  text-anchor: middle;
}
.qcm-pro-price {
  fill: var(--text-primary);
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 800;
}
.qcm-pro-rate { fill: var(--text-muted); font-family: var(--font-sans); font-size: 11px; font-weight: 700; }
.qcm-pro-tail { fill: #fff; stroke: var(--border-strong); stroke-width: 1.2; }
.qcm-pro-check { opacity: 0; transition: opacity 0.3s ease; }
.qcm-pro.is-pick .qcm-pro-check { opacity: 1; }
.qcm-pro-check circle { fill: var(--qcm-done); }
.qcm-pro-check path { fill: none; stroke: #fff; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

/* --- truck --- */
.qcm-truck { opacity: 0; transition: opacity 0.3s ease; }
.qcm-truck.is-on { opacity: 1; }
.qcm-truck__bob {
  transform-box: fill-box;
  transform-origin: center bottom;
  animation: qcm-bob 0.55s ease-in-out infinite alternate;
}
@keyframes qcm-bob { to { transform: translateY(-1.1px); } }
.qcm-tk-body { fill: #FFFFFF; stroke: #B9C6D2; stroke-width: 1.2; }
.qcm-tk-cab { fill: var(--primary); }
.qcm-tk-glass { fill: #CFE0F1; }
.qcm-tk-rack { fill: none; stroke: #7F8D9B; stroke-width: 1.8; stroke-linecap: round; }
.qcm-tk-tire { fill: #40484F; }
.qcm-tk-hub { fill: #C7D0D8; }
.qcm-tk-beacon { fill: #E8A317; animation: qcm-beacon 0.9s steps(1) infinite; }
@keyframes qcm-beacon { 50% { opacity: 0.25; } }
.qcm-tk-stripe { fill: var(--primary); }

/* --- burst --- */
.qcm-burst { opacity: 0; }
.qcm-burst.is-on { opacity: 1; }
.qcm-burst__in {
  transform-box: fill-box;
  transform-origin: center;
}
.qcm-burst.is-on .qcm-burst__in { animation: qcm-burst 0.8s cubic-bezier(0.2, 0.9, 0.3, 1.2) both; }
@keyframes qcm-burst {
  0% { transform: scale(0.3); opacity: 0; }
  55% { transform: scale(1.12); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
.qcm-burst-ring { fill: none; stroke: var(--qcm-done); stroke-width: 2.4; opacity: 0.5; }
.qcm-burst-ray { stroke: var(--qcm-done); stroke-width: 3; stroke-linecap: round; opacity: 0.6; }
.qcm-burst-badge circle { fill: var(--qcm-done); }
.qcm-burst-badge path { fill: none; stroke: #fff; stroke-width: 2.8; stroke-linecap: round; stroke-linejoin: round; }

/* --- pins --- */
.qcm-pin { cursor: pointer; --pin: var(--qcm-quoting); }
.qcm-pin[data-status="open"] { --pin: var(--qcm-open); }
.qcm-pin[data-status="quoting"] { --pin: var(--qcm-quoting); }
.qcm-pin[data-status="scheduled"] { --pin: var(--qcm-scheduled); }
.qcm-pin[data-status="done"] { --pin: var(--qcm-done); }
.qcm-pin[data-live="open"] { --pin: var(--qcm-open); }
.qcm-pin[data-live="quoting"] { --pin: var(--qcm-quoting); }
.qcm-pin[data-live="scheduled"] { --pin: var(--qcm-scheduled); }
.qcm-pin[data-live="done"] { --pin: var(--qcm-done); }

.qcm-pin__lift {
  transform-box: fill-box;
  transform-origin: center bottom;
  transition: transform 0.24s cubic-bezier(0.2, 0.9, 0.3, 1.3);
}
.qcm-pin__body {
  fill: var(--pin);
  stroke: #fff;
  stroke-width: 2.4;
  transition: fill 0.4s ease;
}
.qcm-pin__dot { fill: #fff; }
.qcm-pin__ico { fill: none; stroke: var(--pin); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; transition: stroke 0.4s ease; }
.qcm-pin__shadow { fill: rgba(20, 40, 66, 0.16); }
.qcm-pin__hit { fill: transparent; }
.qcm-pin__pulse {
  fill: none;
  stroke: var(--pin);
  stroke-width: 2.5;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
}
.qcm-pin.is-featured .qcm-pin__pulse { animation: qcm-pulse 1.9s ease-out infinite; }
@keyframes qcm-pulse {
  0% { opacity: 0.6; transform: scale(0.65); }
  100% { opacity: 0; transform: scale(1.9); }
}
.qcm-pin:hover .qcm-pin__lift,
.qcm-pin:focus-visible .qcm-pin__lift { transform: translateY(-5px) scale(1.07); }
.qcm-pin:focus { outline: none; }
.qcm-pin:focus-visible .qcm-pin__body { stroke: var(--primary); stroke-width: 3.4; }
.qcm-pin.is-dim { opacity: 0.5; transition: opacity 0.4s ease; }
.qcm-pin.is-featured .qcm-pin__lift { transform: scale(1.1); }
.qcm-pin.is-drop .qcm-pin__lift { animation: qcm-drop 0.85s cubic-bezier(0.2, 0.9, 0.25, 1.15) both; }
@keyframes qcm-drop {
  0% { transform: translateY(-120px) scale(0.7); opacity: 0; }
  55% { transform: translateY(0) scale(1.16); opacity: 1; }
  72% { transform: translateY(-9px) scale(1.04); }
  100% { transform: translateY(0) scale(1.1); }
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 1040px) {
  .qcm__layout { grid-template-columns: 1fr; }
  .qcm__panel { order: 2; }
}

@media (max-width: 860px) {
  .qcm__bar { grid-template-columns: 1fr; }
  .qcm-rail { grid-template-columns: repeat(2, 1fr); gap: 4px; }
  .qcm-rail__step::after { display: none; }
  .qcm__controls { justify-content: space-between; }
}

@media (max-width: 600px) {
  .qcm { padding: 56px 0 56px; }
  .qcm__legend { right: 8px; bottom: 8px; padding: 6px 9px; gap: 3px 9px; }
  .qcm__legend span { font-size: 0.64rem; }
  .qcm__hint { display: none; }
  .qcm-rail { grid-template-columns: 1fr; gap: 2px; }
  .qcm-rail__step { padding: 5px 4px; }
  .qcm-rail__num { width: 23px; height: 23px; font-size: 0.7rem; }
  .qcm-rail__label { font-size: 0.78rem; }
  .qcm__panel { padding: 16px; }
  .qcm-quotes { min-height: 0; }
  .qcm__tip { width: 200px; }
}

/* Compact map framing (set by JS) */
.qcm--compact .qcm-city__name { font-size: 24px; stroke-width: 5; }
.qcm--compact .qcm-city__name--sm { display: none; }
.qcm--compact .qcm-ground-label { font-size: 52px; letter-spacing: 13px; }
.qcm--compact .qcm-river-label { display: none; }

@media (prefers-reduced-motion: reduce) {
  .qcm-river--flow,
  .qcm-river--flow2,
  .qcm-rock--flow,
  .qcm-truck__bob,
  .qcm-tk-beacon,
  .qcm-pin.is-featured .qcm-pin__pulse,
  .qcm-ripple.is-on { animation: none; }
  .qcm-pin.is-drop .qcm-pin__lift { animation: none; }
  .qcm-burst.is-on .qcm-burst__in { animation: none; }
}