/* ============================================================================
   Municipalities & Local Government — what is true of this page only
   ---------------------------------------------------------------------------
   The nine-section rhythm comes from product-page.css.

   NOTE ON SCOPING. Every page stylesheet ends up in one bundle, so a bare
   `.sc-…` rule written here would reach the product pages too. Anything this
   page changes about a shared class is scoped by this page's own id or by an
   `mu-` class.

   ON THE PALETTE. Like its sibling Park Districts page, this guide names its
   own: "white and pale-blue backgrounds, navy headings, royal-blue accents,
   yellow action buttons and rounded cards." Yellow is the colour of an action
   here, not of a section, so the page alternates pale and white rather than
   taking the product pages' yellow and dark bands.

   Because every boundary is a colour change rather than a shared field, each
   section keeps its own top padding; consecutive `--flow` sections otherwise
   drop it. Three classes to clear `.section--flow + .section--flow`.       */

#mu-website,
#mu-solutions,
#mu-process { background: var(--white); }
#mu-journeys.sc-demo { background: var(--blue-50); }

#mu-challenges.section.section--flow,
#mu-website.section.section--flow,
#mu-journeys.section.section--flow,
#mu-solutions.section.section--flow,
#mu-work.section.section--flow,
#mu-process.section.section--flow,
#mu-faq.section.section--flow,
#mu-inquiry.section.section--flow { padding-top: var(--section-y); }

.mu-hero { padding-bottom: clamp(1.5rem, 1.2rem + 1vw, 2.25rem); }
.mu-hero__art { display: block; width: 100%; height: auto; border-radius: var(--r-lg); }

/* --- A shared link ------------------------------------------------------------- */

.mu-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--blue-600);
  text-decoration: underline;
  text-underline-offset: 0.2em;
  transition: gap var(--d-base) var(--ease-out-expo);
}
.mu-link:hover { gap: 0.6rem; color: var(--blue-700); }

/* --- The banner's supporting line ------------------------------------------------ */

.mu-marks {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(0.5rem, 0.4rem + 0.6vw, 1.25rem);
  margin: clamp(1.5rem, 1.2rem + 1.5vw, 2.5rem) 0 0;
  padding: 0;
  list-style: none;
}
.mu-marks li {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-width: 0;
  padding-inline: 0.35rem;
  font-size: var(--fs-sm);
  font-weight: 700;
  line-height: 1.35;
  text-align: center;
  color: var(--blue-700);
}
.mu-marks img { display: block; flex: none; width: 2.5rem; height: 2.5rem; }
.mu-marks li + li { border-left: 1px solid var(--border); }
@media (max-width: 719px) {
  .mu-marks { grid-template-columns: minmax(0, 1fr); row-gap: 1rem; }
  .mu-marks li { justify-content: flex-start; border-left: 0; text-align: left; }
}

/* --- 2. The four challenges --------------------------------------------------------
   White cards two by two on the pale field, with the question as the most
   prominent text — so the label above it is an eyebrow, not a heading.    */

.mu-chal__grid {
  display: grid;
  gap: clamp(0.85rem, 0.7rem + 0.8vw, 1.5rem);
  margin: clamp(2rem, 1.5rem + 2vw, 3rem) 0 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 820px) { .mu-chal__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.mu-chal__card {
  display: flex;
  align-items: flex-start;
  gap: clamp(0.85rem, 0.7rem + 0.6vw, 1.25rem);
  min-width: 0;
  padding: clamp(1.1rem, 0.9rem + 0.8vw, 1.6rem);
  border-radius: var(--r-2xl);
  background: var(--white);
  box-shadow: inset 0 0 0 1px var(--border);
}
.mu-chal__card > img { display: block; flex: none; width: 3.5rem; height: 3.5rem; }
.mu-chal__text { min-width: 0; }
.mu-chal__label {
  margin: 0;
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--blue-600);
}
.mu-chal__q {
  margin: 0.5rem 0 0;
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 0.95rem + 0.45vw, 1.3rem);
  font-weight: 700;
  line-height: 1.25;
  color: var(--ink-900);
}
.mu-chal__d { margin: 0.6rem 0 0; font-size: var(--fs-sm); line-height: 1.6; color: var(--text-secondary); }

.mu-chal__close {
  width: max-content;
  max-width: 100%;
  margin: clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem) auto 0;
  padding: 0.75rem clamp(1rem, 0.85rem + 0.7vw, 1.5rem);
  border-radius: var(--r-pill);
  background: #FDFBE3;
  box-shadow: inset 0 0 0 1px var(--yellow-300);
  font-size: var(--fs-sm);
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
  color: var(--ink-900);
}

/* --- 3. Municipal website design ------------------------------------------------- */

.mu-web {
  display: grid;
  gap: clamp(1.5rem, 1.2rem + 1.5vw, 3rem);
  align-items: center;
}
@media (min-width: 980px) { .mu-web { grid-template-columns: minmax(0, 0.88fr) minmax(0, 1.12fr); } }
.mu-web__copy > * { min-width: 0; }
.mu-web__lead {
  margin: 1rem 0 0;
  font-size: var(--fs-body);
  line-height: 1.65;
  color: var(--text-secondary);
}
.mu-web__cta { display: flex; margin-top: clamp(1.25rem, 1rem + 1vw, 1.75rem); }

.mu-web__visual { min-width: 0; }
.mu-web__shot {
  margin: 0;
  padding: clamp(0.6rem, 0.5rem + 0.4vw, 0.85rem);
  border-radius: var(--r-2xl);
  background: var(--white);
  box-shadow: inset 0 0 0 1px var(--border), var(--e-1);
}
.mu-web__shot img { display: block; width: 100%; height: auto; border-radius: var(--r-lg); }
.mu-web__shot figcaption { margin-top: 0.5rem; text-align: center; }

/* The four points sit beneath both columns, as the guide's own layout does. */
.mu-points {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: clamp(0.85rem, 0.7rem + 0.7vw, 1.25rem);
  margin: clamp(1.75rem, 1.4rem + 1.5vw, 2.75rem) 0 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 1000px) { .mu-points { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.mu-points li {
  min-width: 0;
  padding: clamp(1.1rem, 0.9rem + 0.7vw, 1.5rem);
  border-radius: var(--r-xl);
  background: var(--blue-50);
  box-shadow: inset 0 0 0 1px var(--blue-200);
  text-align: center;
}
.mu-points img { display: block; width: 3.25rem; height: 3.25rem; margin: 0 auto; }
.mu-points__k {
  margin: 0.85rem 0 0;
  font-size: var(--fs-body);
  font-weight: 700;
  line-height: 1.3;
  color: var(--blue-700);
}
.mu-points__d { margin: 0.5rem 0 0; font-size: var(--fs-sm); line-height: 1.6; color: var(--text-secondary); }

/* --- 4. Resident journeys ------------------------------------------------------------ */

.mu-journeys {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
  gap: clamp(0.85rem, 0.7rem + 0.8vw, 1.5rem);
  margin: clamp(2rem, 1.5rem + 2vw, 3rem) 0 0;
  padding: 0;
  list-style: none;
}
.mu-journey {
  display: flex;
  flex-direction: column;
  min-width: 0;
  --mu-card-pad: clamp(1rem, 0.85rem + 0.7vw, 1.4rem);
  padding: var(--mu-card-pad);
  border-radius: var(--r-2xl);
  background: var(--white);
  box-shadow: inset 0 0 0 1px var(--border);
}
/* The interface illustrations have a pale ground of their own, so they take a
   tinted frame rather than bleeding to the card's edge. */
.mu-journey__img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 700 / 550;
  object-fit: cover;
  object-position: top center;
  border-radius: var(--r-lg);
  background: var(--blue-50);
}
.mu-journey__k {
  margin: 1.1rem 0 0;
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 0.95rem + 0.4vw, 1.25rem);
  font-weight: 700;
  color: var(--ink-900);
}
.mu-journey__d { margin: 0.5rem 0 1.1rem; font-size: var(--fs-sm); line-height: 1.6; color: var(--text-secondary); }
.mu-journey__steps {
  display: grid;
  gap: 0.5rem;
  margin: auto 0 0;
  padding: 0;
  list-style: none;
}
.mu-journey__steps li {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  min-width: 0;
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--blue-700);
}
.mu-journey__n {
  display: grid;
  place-items: center;
  flex: none;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: var(--r-pill);
  background: var(--yellow-300);
  font-size: var(--fs-xs);
  color: var(--ink-900);
}
/* Product-dependent journeys carry their offering's link. */
.mu-journey__link { margin-top: 1rem; align-self: flex-start; }

.mu-journeys__close {
  margin: clamp(1.25rem, 1rem + 1vw, 1.75rem) 0 0;
  font-family: var(--font-display);
  font-size: clamp(1rem, 0.9rem + 0.4vw, 1.2rem);
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
  color: var(--blue-700);
}

/* --- 5. Relevant solutions -------------------------------------------------------------
   Website services take the full width; the three products sit beneath; the
   recreation panel is smaller, because recreation is an aside here.       */

.mu-sol {
  display: flex;
  align-items: flex-start;
  gap: clamp(0.85rem, 0.7rem + 0.6vw, 1.25rem);
  min-width: 0;
  padding: clamp(1.1rem, 0.9rem + 0.8vw, 1.6rem);
  border-radius: var(--r-2xl);
  background: var(--blue-50);
  box-shadow: inset 0 0 0 1px var(--blue-200);
  transition: box-shadow var(--d-base) var(--ease-out-soft),
              transform var(--d-base) var(--ease-out-soft);
}
.mu-sol:hover { transform: translateY(-3px); box-shadow: inset 0 0 0 1px var(--blue-300), var(--e-1); }
.mu-sol--feature {
  margin-top: clamp(2rem, 1.5rem + 2vw, 3rem);
  background: var(--white);
  box-shadow: inset 0 0 0 1px var(--border), var(--e-1);
}
/* In the row of three, the card stretches to the tallest sibling but the text
   column inside it did not, so `margin-top: auto` on the link had no slack to
   push against and the three links sat at three heights. Stretching the column
   and keeping the icon pinned to the top gives them one baseline. */
.mu-sols .mu-sol { align-items: stretch; }
.mu-sols .mu-sol__icon { align-self: flex-start; }
.mu-sols .mu-sol__text { flex: 1; }

.mu-sol__icon { display: block; flex: none; width: 3.25rem; height: 3.25rem; }
.mu-sol--feature .mu-sol__icon { width: 4.5rem; height: 4.5rem; }
.mu-sol__text { display: flex; flex-direction: column; min-width: 0; }
.mu-sol__need {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 0.95rem + 0.4vw, 1.25rem);
  font-weight: 700;
  line-height: 1.25;
  color: var(--ink-900);
}
.mu-sol__need--big { font-size: clamp(1.2rem, 1.05rem + 0.6vw, 1.55rem); }
/* One of the three needs wraps to two lines and the others do not, which left
   the product labels beneath them on three different baselines. Reserving two
   lines in the row of three settles them onto one. The feature and aside cards
   are full width and never wrap, so they keep their natural height. */
@media (min-width: 980px) {
  .mu-sols .mu-sol__need { min-height: calc(2 * 1.25em); }
}
/* Secondary to the need, as the guide asks. */
.mu-sol__product { margin: 0.35rem 0 0; font-size: var(--fs-sm); font-weight: 700; color: var(--blue-600); }
.mu-sol__d { margin: 0.7rem 0 1.1rem; font-size: var(--fs-sm); line-height: 1.6; color: var(--text-secondary); }
.mu-sol__text .mu-link { margin-top: auto; align-self: flex-start; }

.mu-sols {
  display: grid;
  gap: clamp(0.85rem, 0.7rem + 0.7vw, 1.25rem);
  margin: clamp(0.85rem, 0.7rem + 0.7vw, 1.25rem) 0 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 980px) { .mu-sols { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 620px) and (max-width: 979px) { .mu-sols { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.mu-aside {
  display: flex;
  align-items: flex-start;
  gap: clamp(0.85rem, 0.7rem + 0.6vw, 1.25rem);
  margin-top: clamp(0.85rem, 0.7rem + 0.7vw, 1.25rem);
  padding: clamp(1rem, 0.85rem + 0.7vw, 1.4rem);
  border-radius: var(--r-2xl);
  background: var(--blue-50);
  box-shadow: inset 0 0 0 1px var(--blue-200);
}
.mu-aside > img { display: block; flex: none; width: 3.25rem; height: 3.25rem; }
.mu-aside__text { min-width: 0; }
.mu-aside__k {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1rem, 0.9rem + 0.4vw, 1.2rem);
  font-weight: 700;
  color: var(--ink-900);
}
.mu-aside__d { margin: 0.45rem 0 0.85rem; font-size: var(--fs-sm); line-height: 1.6; color: var(--text-secondary); }

/* --- 6. The project cards ------------------------------------------------------------------ */

.mu-projects {
  display: grid;
  gap: clamp(1rem, 0.8rem + 1vw, 1.5rem);
  margin: clamp(2rem, 1.5rem + 2vw, 3rem) 0 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 820px) { .mu-projects { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.mu-project {
  display: flex;
  flex-direction: column;
  min-width: 0;
  --mu-card-pad: clamp(1.1rem, 0.9rem + 0.8vw, 1.6rem);
  padding: var(--mu-card-pad);
  border-radius: var(--r-2xl);
  background: var(--white);
  box-shadow: inset 0 0 0 1px var(--border);
}
.mu-project__shot { margin: calc(var(--mu-card-pad) * -1) calc(var(--mu-card-pad) * -1) 0; }
.mu-project__shot img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--r-2xl) var(--r-2xl) 0 0;
}
/* Wauwatosa has no approved preview yet, so its card states that plainly
   rather than showing an empty frame pretending to be a screenshot. It has to
   read as a deliberate placeholder, which means separating from two grounds at
   once: the white card it sits in and the blue-50 section behind that. A flat
   --blue-50 fill did neither — it matched the section exactly and the panel
   vanished. A tinted wash plus a dashed rule reads as "held for artwork". */
.mu-project__pending {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 0.75rem;
  margin: calc(var(--mu-card-pad) * -1) calc(var(--mu-card-pad) * -1) 0;
  aspect-ratio: 3 / 2;
  border-radius: var(--r-2xl) var(--r-2xl) 0 0;
  background:
    repeating-linear-gradient(135deg,
      rgb(255 255 255 / .55) 0 10px, rgb(255 255 255 / 0) 10px 20px),
    linear-gradient(160deg, var(--blue-100) 0%, var(--blue-200) 100%);
  box-shadow: inset 0 -1px 0 0 var(--blue-200);
  font-size: var(--fs-sm);
  font-weight: 700;
  text-align: center;
  color: var(--blue-700);
}
.mu-project__pendingMark {
  display: grid;
  place-items: center;
  width: 3.25rem;
  height: 3.25rem;
  border-radius: var(--r-pill);
  background: var(--white);
  box-shadow: inset 0 0 0 1px var(--blue-200);
  color: var(--blue-500);
}
.mu-project__pendingMark svg { width: 1.6rem; height: 1.6rem; }

.mu-project__status {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  width: max-content;
  margin: 1.1rem 0 0;
  padding: 0.25rem 0.7rem;
  border-radius: var(--r-pill);
  font-size: var(--fs-xs);
  font-weight: 700;
}
.mu-project__dot { width: 0.5rem; height: 0.5rem; border-radius: var(--r-pill); background: currentColor; }
/* Status is carried by the label as well as the colour, never by colour alone. */
.mu-project__status.is-live { background: #E4F5EA; color: #1E7A44; }
.mu-project__status.is-soon { background: #FDF6E0; color: #7A5A05; }

.mu-project__k {
  margin: 0.7rem 0 0;
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 1rem + 0.4vw, 1.3rem);
  font-weight: 700;
  color: var(--ink-900);
}
.mu-project__line { margin: 0.35rem 0 0; font-size: var(--fs-sm); font-weight: 700; color: var(--blue-600); }
.mu-project__d { margin: 0.7rem 0 0; font-size: var(--fs-sm); line-height: 1.6; color: var(--text-secondary); }
.mu-project__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0.9rem 0 0;
  padding: 0;
  list-style: none;
}
.mu-project__tags li {
  padding: 0.3rem 0.65rem;
  border-radius: var(--r-pill);
  background: var(--blue-50);
  box-shadow: inset 0 0 0 1px var(--blue-200);
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--blue-700);
}
.mu-project__cta { display: flex; margin-top: auto; padding-top: 1.25rem; }

.mu-work__close {
  margin: clamp(1.5rem, 1.2rem + 1vw, 2.25rem) 0 0;
  font-family: var(--font-display);
  font-size: clamp(1rem, 0.9rem + 0.4vw, 1.2rem);
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
  color: var(--blue-700);
}

/* --- 7. Process and support ------------------------------------------------------------------ */

.mu-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: clamp(0.85rem, 0.7rem + 0.8vw, 1.25rem);
  margin: clamp(2rem, 1.5rem + 2vw, 3rem) 0 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 1100px) { .mu-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.mu-step {
  min-width: 0;
  padding: clamp(1.1rem, 0.9rem + 0.7vw, 1.5rem);
  border-radius: var(--r-xl);
  background: var(--blue-50);
  box-shadow: inset 0 0 0 1px var(--blue-200);
}
.mu-step__n {
  display: grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: var(--r-pill);
  background: var(--yellow-300);
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--ink-900);
}
.mu-step__icon { display: block; width: 3.75rem; height: 3.75rem; margin: 0.6rem 0 0; }
.mu-step__k {
  margin: 0.9rem 0 0;
  font-size: var(--fs-body);
  font-weight: 700;
  line-height: 1.3;
  color: var(--blue-700);
}
.mu-step__d { margin: 0.5rem 0 0; font-size: var(--fs-sm); line-height: 1.6; color: var(--text-secondary); }

/* Its own panel, so maintenance never reads as part of the project. */
.mu-maint {
  display: grid;
  gap: clamp(1rem, 0.85rem + 0.8vw, 1.75rem);
  align-items: center;
  margin-top: clamp(1rem, 0.85rem + 0.8vw, 1.5rem);
  padding: clamp(1.1rem, 0.9rem + 0.8vw, 1.6rem);
  border-radius: var(--r-2xl);
  background: var(--blue-50);
  box-shadow: inset 0 0 0 1px var(--blue-200);
}
@media (min-width: 760px) { .mu-maint { grid-template-columns: auto minmax(0, 1fr); } }
.mu-maint__mark {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  width: 9rem;
  font-size: var(--fs-xs);
  font-weight: 700;
  line-height: 1.35;
  text-align: center;
  color: var(--blue-700);
}
.mu-maint__mark img { display: block; width: 3.25rem; height: 3.25rem; }
@media (min-width: 760px) { .mu-maint__mark { border-right: 1px solid var(--blue-200); padding-right: 1.25rem; } }
.mu-maint__text { min-width: 0; }
.mu-maint__k {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 0.95rem + 0.4vw, 1.25rem);
  font-weight: 700;
  color: var(--ink-900);
}
.mu-maint__d { margin: 0.45rem 0 0; font-size: var(--fs-sm); line-height: 1.6; color: var(--text-secondary); }

/* --- 8. The FAQ, heading beside the accordion --------------------------------------------
   The same treatment as the Park District page, which this guide asks for
   by name — including its second scrim, because this section is short and
   the shared vertical one alone would let the photograph reach the heading. */

.mu-faq__grid {
  display: grid;
  gap: clamp(1.5rem, 1.2rem + 1.5vw, 3rem);
  align-items: start;
}
@media (min-width: 960px) { .mu-faq__grid { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); } }
.mu-faq__intro > * { min-width: 0; }
.mu-faq__list { max-width: none; margin-top: 0; }
.mu-faq__link {
  margin: 0;
  padding: 0 clamp(0.9rem, 0.8rem + 0.5vw, 1.35rem) 1.1rem;
}

#mu-faq .sc-faq__bg { object-position: 72% 58%; }
#mu-faq.sc-faq::after {
  background:
    linear-gradient(90deg,
      rgb(242 247 255 / .94) 0%,
      rgb(242 247 255 / .88) 34%,
      rgb(242 247 255 / .35) 52%,
      rgb(242 247 255 / 0) 66%),
    linear-gradient(180deg,
      rgb(242 247 255 / .95) 0%,
      rgb(242 247 255 / .88) 40%,
      rgb(242 247 255 / .78) 70%,
      rgb(242 247 255 / .74) 88%,
      rgb(242 247 255 / .93) 97%,
      rgb(242 247 255 / 1) 100%);
}
@media (max-width: 959px) {
  #mu-faq.sc-faq::after {
    background: linear-gradient(180deg,
      rgb(242 247 255 / .97) 0%,
      rgb(242 247 255 / .95) 45%,
      rgb(242 247 255 / .82) 74%,
      rgb(242 247 255 / .66) 90%,
      rgb(242 247 255 / .95) 98%,
      rgb(242 247 255 / 1) 100%);
  }
}

/* --- 9. The inquiry ------------------------------------------------------------------------ */

.mu-inq__points { margin-top: clamp(1.25rem, 1rem + 1vw, 1.75rem); }
.mu-inq__alt {
  margin: clamp(1.25rem, 1rem + 1vw, 1.75rem) 0 0;
  font-size: var(--fs-sm);
  color: var(--text-secondary);
}
.mu-inq__alt a {
  font-weight: 700;
  color: var(--blue-600);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
.mu-inq__alt a:hover { color: var(--blue-700); }

@media (prefers-reduced-motion: reduce) {
  .mu-sol, .mu-sol:hover { transition: none; transform: none; }
}