/* MapClick Liverpool red (#C8102E) — mirrors community green / public-sector blue kit */
body.page-mapclick{
  --mc-red:#C8102E;
  --mc-red-hover:#9E0B23;
  --mc-red-tint:#fdecee;
  --mc-red-tint-h:#f9dde1;
}
.page-mapclick .eyebrow-mc{color:var(--mc-red)}
.page-mapclick a:hover{color:var(--mc-red-hover)}
.page-mapclick .need-tag{color:var(--mc-red);font:600 11px/1 ui-monospace,Menlo,monospace;letter-spacing:.08em;margin-bottom:6px}
.need-red{background:var(--mc-red-tint)}
.need-red:hover{background:var(--mc-red-tint-h)}
.need-red p{margin:0;font-size:15px;line-height:1.55;color:var(--ink-2)}
.need-red .need-q{font-size:18px;font-weight:600;letter-spacing:-0.015em;line-height:1.3;color:var(--ink)}
.band-red{background:var(--mc-red)}
.band-red .step{background:var(--mc-red)}
.band-red p{max-width:640px}
.page-mapclick .stage-flow{margin:0;font-size:17px;line-height:1.55;color:var(--ink-2);max-width:720px}
.page-mapclick .mc-link-row{margin:28px auto 0;padding:0 24px 8px;max-width:var(--max);width:100%;box-sizing:border-box}
.page-mapclick .mc-link-row a{font-size:15px;font-weight:500}

/* Who it's for — roles, routes, CTA */
.page-mapclick .btn-red{background:var(--mc-red);color:#fff!important}
.page-mapclick .btn-red:hover{background:var(--mc-red-hover);color:#fff!important}
.page-mapclick .mc-routes{display:flex;flex-direction:column;gap:18px}
.page-mapclick .mc-route{border:1px solid var(--line);border-radius:var(--radius-lg);padding:clamp(24px,4vw,40px);display:grid;grid-template-columns:minmax(0,80px) 1fr;gap:20px 28px;background:#fff}
.page-mapclick .mc-route .n{font-family:var(--mono);font-size:30px;color:var(--mc-red);font-weight:500}
.page-mapclick .mc-route h3{margin:0 0 6px;font-size:clamp(22px,2.6vw,28px);letter-spacing:-0.025em}
.page-mapclick .mc-route .who{font-family:var(--mono);font-size:12.5px;letter-spacing:.03em;color:var(--mc-red);margin:0 0 14px}
.page-mapclick .mc-route p{margin:0 0 12px;font-size:17px;line-height:1.6;color:var(--ink-2);max-width:760px}
.page-mapclick .mc-route ul{margin:0;padding-left:20px;color:var(--ink-2);font-size:16px;line-height:1.6}
@media(max-width:560px){.page-mapclick .mc-route{grid-template-columns:1fr}.page-mapclick .mc-route .n{font-size:20px}}
.page-mapclick .mc-talk{background:var(--mc-red-tint);border-radius:var(--radius-lg);padding:clamp(32px,6vw,56px);display:flex;flex-direction:column;gap:20px}
.page-mapclick .mc-talk p{margin:0;font-size:18px;line-height:1.6;color:var(--ink-2);max-width:720px}
.page-mapclick .mc-actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.page-mapclick .band-red .h2-band{color:#fff}
.page-mapclick .band-red .eyebrow-sm{opacity:.85;color:#fff}

/* MapClick crumb — same pattern/placement as community grant-calendar .gc-crumb (under primary nav, above title, left-aligned). Link uses MapClick red instead of mute. */
.page-mapclick .mc-crumb{
  max-width:var(--max);
  width:100%;
  margin:24px auto 0;
  padding:0 24px;
  box-sizing:border-box;
  font-size:14px;
  color:var(--mute);
  text-align:left;
}
.page-mapclick .mc-crumb a{color:var(--mc-red);text-decoration:none}
.page-mapclick .mc-crumb a:hover{color:var(--mc-red-hover);text-decoration:underline;text-underline-offset:3px}
.page-mapclick .mc-crumb + .hero{padding-top:40px}

/* Modules — mobile captures in phone frames (fixed identical frame size) */
.page-mapclick .mc-mod-grid{
  max-width:var(--max);
  width:100%;
  margin:0 auto;
  padding:48px 24px 8px;
  box-sizing:border-box;
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:88px 28px;
  align-items:stretch;
}
.page-mapclick .mc-mod{
  display:flex;
  flex-direction:column;
  gap:22px;
  min-width:0;
  height:100%;
}
.page-mapclick .mc-phone{
  margin:0;
  display:flex;
  justify-content:center;
  flex:0 0 auto;
}
.page-mapclick .mc-phone-bezel{
  /* Fixed phone window: same width + 9:19.5-ish portrait for all */
  width:min(100%, 260px);
  aspect-ratio:9 / 19.5;
  border-radius:28px;
  background:#1a1a1a;
  padding:10px;
  box-sizing:border-box;
  box-shadow:
    0 1px 0 rgba(255,255,255,.12) inset,
    0 18px 40px -18px rgba(28,27,26,.55),
    0 4px 14px rgba(200,16,46,.12);
  overflow:hidden;
}
.page-mapclick .mc-phone-bezel picture{
  display:block;
  width:100%;
  height:100%;
  border-radius:20px;
  overflow:hidden;
  background:#0b0b0b;
}
.page-mapclick .mc-phone-bezel img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:top center;
  border-radius:20px;
}
.page-mapclick .mc-mod-copy{
  display:flex;
  flex-direction:column;
  gap:10px;
  flex:1 1 auto;
  min-height:0;
}
.page-mapclick .mc-mod-copy .h2-mod{
  margin:0;
  font-size:clamp(22px, 2.2vw, 30px);
}
.page-mapclick .mc-mod-copy p{
  margin:0;
  font-size:15.5px;
  line-height:1.55;
  color:var(--ink-2);
}
@media (max-width:1000px){
  .page-mapclick .mc-mod-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:56px 22px;
  }
  .page-mapclick .mc-phone-bezel{width:min(100%, 280px)}
}
@media (max-width:640px){
  .page-mapclick .mc-mod-grid{
    display:flex;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    gap:18px;
    padding:32px 24px 20px;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:thin;
    align-items:stretch;
  }
  .page-mapclick .mc-mod{
    flex:0 0 min(82vw, 300px);
    scroll-snap-align:start;
    height:auto;
  }
  .page-mapclick .mc-phone-bezel{
    width:100%;
    max-width:280px;
    aspect-ratio:9 / 19.5;
  }
}