/* ===== Tokens matching your site ===== */
:root{
  --kc-navy: #0f113a;
  --kc-accent: #ff7a00;
  --kc-blue-700: #1f6aff;
  --kc-blue-400: #4ea3ff;

  --muni-radius: 16px;
  --muni-shadow: 0 12px 28px rgba(8,18,44,.12);
  --muni-shadow-hover: 0 20px 44px rgba(8,18,44,.20);

  --muni-card-h: 360px;      /* equal card height */
  --muni-media-h: 220px;     /* image area height */
}

/* ===== Heading: orange + twin blue bars ===== */
#muni > h2{
  position: relative;
  margin: 0 0 10px;
  padding-left: 28px;
  line-height: 1.15;
  font-weight: 800;
  color: var(--kc-accent);
  letter-spacing: .5px;
  font-size: clamp(1.6rem, 3vw, 2.2rem);
}
#muni > h2::before,
#muni > h2::after{
  content: "";
  position: absolute;
  left: 0;
  top: .08em;
  bottom: .08em;
  border-radius: 3px;
}
#muni > h2::before{ width: 6px; background: var(--kc-blue-700); }
#muni > h2::after{  left: 10px; width: 4px; background: var(--kc-blue-400); }

.muni-intro{
  margin: 0 0 18px;
  color: #3a475a;
  max-width: 80ch;
}

/* ===== Grid (3 / 2 / 1) ===== */
.muni-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 28px;
}
@media (max-width: 1024px){ .muni-grid{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 640px){  .muni-grid{ grid-template-columns: 1fr; } }

/* ===== NON-CLICKABLE CARD with elegant hover ===== */
.muni-card{
  background: #fff;
  border-radius: var(--muni-radius);
  box-shadow: var(--muni-shadow);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: var(--muni-card-h);
  color: var(--kc-navy);
  cursor: default;                    /* not clickable */
  transition: transform .22s ease, box-shadow .22s ease;
  will-change: transform, box-shadow;
}
.muni-card:hover{
  transform: translateY(-4px);
  box-shadow: var(--muni-shadow-hover);
}

/* Image area */
.muni-media{
  position: relative;
  height: var(--muni-media-h);
  background: #000;
  overflow: hidden;
}
.muni-media img{
  width: 100%;
  height: 100%;
  object-fit: cover;                  /* gallery feel */
  transform: scale(1);
  transition: transform .35s ease;
}
.muni-card:hover .muni-media img{
  transform: scale(1.05);             /* subtle zoom on hover */
}

/* Optional soft edge glow on hover */
.muni-card:hover .muni-media::after{
  content:"";
  position:absolute; inset:0;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.12);
  pointer-events:none;
}

/* Body */
.muni-body{
  background: #f7f9fc;
  padding: 16px 18px 20px;
  border-top: 1px solid rgba(0,0,0,.04);
  display: grid;
  align-content: end;
  gap: 6px;
}
.muni-body h3{
  margin: 0;
  font-weight: 800;
  letter-spacing: .6px;
  text-transform: uppercase;
  line-height: 1.25;

  /* keep titles tidy across rows */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.muni-body p{
  margin: 0;
  color: #3a475a;
  font-weight: 500;
}

/* --- Make all municipal card images smaller & perfectly centered --- */
:root{
  /* tweak these two to taste */
  --muni-media-pad: 22px;   /* white padding around the image area */
  --muni-img-max: 78%;      /* max size of image inside the media area */
}

.muni-media{
  /* keep your fixed media height from earlier */
  /* height: var(--muni-media-h); */
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--muni-media-pad);
  overflow: hidden;         /* hides tiny hover zoom edges */
}

.muni-media img{
  width: auto;
  height: auto;
  max-width: var(--muni-img-max);
  max-height: var(--muni-img-max);
  object-fit: contain;      /* never crop the product */
  object-position: center;
  display: block;

  /* nice, gentle hover that doesn’t hit the edges */
  transform: scale(0.96);
  transition: transform .28s ease;
}
.muni-card:hover .muni-media img{
  transform: scale(1.0);
}

/* Optional: slightly smaller on very small screens */
@media (max-width: 640px){
  :root{ --muni-img-max: 72%; }
}

/* Valve & Service Boxes heading — same style as main orange heading */
#valve-boxes > h2,
#valve-boxes > h2.muni-subhead{
  position: relative;
  margin: 0 0 12px;
  padding-left: 28px;                 /* space for the blue bars */
  line-height: 1.15;
  font-weight: 800;
  color: var(--kc-accent, #ff7a00);   /* orange */
  letter-spacing: .5px;
  font-size: clamp(1.6rem, 3vw, 2.2rem);
}

/* twin blue accent bars */
#valve-boxes > h2::before,
#valve-boxes > h2::after{
  content: "";
  position: absolute;
  left: 0;
  top: .08em;
  bottom: .08em;
  border-radius: 3px;
}
#valve-boxes > h2::before{
  width: 6px;
  background: var(--kc-blue-700, #1f6aff);
}
#valve-boxes > h2::after{
  left: 10px;
  width: 4px;
  background: var(--kc-blue-400, #4ea3ff);
}