/* ═══════════════════════════════════════════════════════════════
   MICHIGAN CRIME SCENE CLEANUP — MASTER CITY TEMPLATE
   Loads after michigan-crime-scene-cleanup.css AND global.css
   Used by all city pages: /cities/[city]-mi/
   ═══════════════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════════════
   1. HERO — dual CTA row
   ═══════════════════════════════════════════════════════════════ */

/* Base hero */
.hero {
    position: relative;
    min-height: 380px;
    height: 54vh;
    max-height: 560px;
    background-color: #f8fcff;
    background-image: var(--hero-image);
    background-position: right center;
    background-size: contain;
    background-repeat: no-repeat;
    overflow: hidden;

    /* Ultimate fallback if nothing set */
    --hero-image: url("../images/default-service-hero.webp");
}

.hero::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  /* Position the overlay right where the image's left edge starts */
  left: 40%;
  width: 10%;
  background: linear-gradient(
    90deg,
    #f8fcff 0%,
    rgba(248, 252, 255, 0.85) 35%,
    rgba(248, 252, 255, 0.40) 65%,
    rgba(248, 252, 255, 0) 100%
  );
  /* Blurs the left edge of the background photo underneath */
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  pointer-events: none;
  z-index: 1;
}
.hero__copy{
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  min-height: inherit;
  height: 100%;
  padding: 32px 34px 32px max(24px, calc((100vw - var(--container)) / 2));
}
.hero__content{ width: 100%; max-width: 560px; }
.hero__image{ display: none; }
.hero h1{
  margin:0 0 10px;
  color:var(--navy-deep);
  font-size:clamp(31px,3.3vw,47px);
  line-height:1.08;
  letter-spacing:-1.2px;
  font-weight:800;
}
.hero h1 span{color:var(--blue)}
.hero__lead{max-width:570px;margin:0 0 14px;font-size:16px;line-height:1.42;color:#203e5e}
.button--hero{min-width:300px;padding:13px 22px;font-size:18px}
.hero__points{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:8px 12px;
  margin-top:13px;
  color:#285274;
  font-size:12px;
  font-weight:700;
}
.hero__points span{white-space:nowrap;display:inline-flex;align-items:center;gap:4px}
.hero__points b{color:var(--green);margin-right:4px}
.hero__points i{height:12px;width:1px;background:#b8d3e8}
.micro-disclosure{margin:11px 0 0;color:#5a7191;font-size:11px;line-height:1.5}
.hero__inner .hero__image {
    background-image: var(--hero-image);
   
}
.hero--detroit-mi{
	--hero-image: url("../images/detroit-hero.webp");
}

.hero--kalamazoo-mi{
	--hero-image: url("../images/kalamazoo-hero.webp");
}
.hero--grand-rapids-mi{
	--hero-image: url("../images/grand-rapids-hero.webp");
}
.hero--sterling-heights-mi{
	--hero-image: url("../images/sterling-heights-hero.webp");
}
.hero--warren-mi{
	--hero-image: url("../images/warren-hero.webp");
}
.hero--ann-arbor-mi{
	--hero-image: url("../images/ann-arbor-hero.webp");
}
.hero--dearborn-mi{
	--hero-image: url("../images/dearborn-hero.webp");
}
.hero--troy-mi{
	--hero-image: url("../images/troy-hero.webp");
}
.hero--farmington-hills-mi{
	--hero-image: url("../images/farmington-hills-hero.webp");
}
.hero--flint-mi{
	--hero-image: url("../images/flint-hero.webp");
}
.hero--saginaw-mi{
	--hero-image: url("../images/saginaw-hero.webp");
}


/* ═══════════════════════════════════════════════════════════════
   1. HERO — city badge + dual CTA row
   ═══════════════════════════════════════════════════════════════ */

.city-badge{
  display: inline-block;
  background: var(--blue-soft);
  color: var(--blue);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 5px 14px;
  border-radius: 20px;
  margin-bottom: 12px;
}

/* Dual CTA row in hero */
.hero__cta-row{
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 14px;
}
.hero__cta-row .button{
  min-width: 240px;
}
.hero__cta-row .button--hero{
  min-width: 260px;
}
.button--hero-outline{
  background: #fff;
  color: var(--navy-deep);
  border: 2px solid var(--navy-deep);
  padding: 11px 22px;
  font-size: 18px;
  font-weight: 700;
}
.button--hero-outline:hover{
  background: var(--navy-deep);
  color: #fff;
}

/* ═══════════════════════════════════════════════════════════════
   2. LOCAL INTRO — text + city photo
   ═══════════════════════════════════════════════════════════════ */

.city-intro__grid{
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 48px;
  align-items: center;
}
.city-intro__text h2{
  margin: 0 0 16px;
  color: var(--navy-deep);
  font-size: clamp(24px, 2.4vw, 30px);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.02em;
}
.city-intro__text p{
  margin: 0 0 14px;
  color: #3d5b78;
  font-size: 15px;
  line-height: 1.65;
}
.city-intro__text p:last-child{ margin-bottom: 0; }
.city-intro__text a{
  color: var(--blue);
  font-weight: 700;
  text-decoration: underline;
}
.city-intro__media{
  min-height: 340px;
  aspect-ratio: 4 / 3;
  border-radius: 12px;
  background: #dce7ed url("detroit-city-view.webp") center/cover no-repeat;
  box-shadow: 0 10px 30px rgba(7,54,111,.10);
}

/* ═══════════════════════════════════════════════════════════════
   3. 12 SERVICE TILES (AUTO LOOP)
   ═══════════════════════════════════════════════════════════════ */

.city-services__grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}

.city-service-card{
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 18px 18px 20px;
  background: #fff;
  border: 1px solid var(--blue-line);
  border-radius: 12px;
  text-decoration: none;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease, background .18s ease;
  min-height: 100%;
}
.city-service-card:hover,
.city-service-card:focus-visible{
  transform: translateY(-3px);
  border-color: var(--blue);
  box-shadow: 0 10px 24px rgba(7,54,111,.08);
  text-decoration: none;
}

.city-service-card__icon{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--navy);
  color: #fff;
  flex-shrink: 0;
}
.city-service-card__icon svg{
  width: 20px;
  height: 20px;
}
.city-service-card__title{
  margin: 0;
  color: var(--navy-deep);
  font-size: 14px;
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: -0.01em;
}
.city-service-card__desc{
  margin: 0;
  color: #5a7191;
  font-size: 12.5px;
  line-height: 1.5;
  flex-grow: 1;
}
.city-service-card__arrow{
  color: var(--blue);
  font-size: 16px;
  font-weight: 800;
  margin-top: 4px;
  transition: transform .15s ease;
}
.city-service-card:hover .city-service-card__arrow{
  transform: translateX(3px);
}

/* ═══════════════════════════════════════════════════════════════
   4. WHY CARDS — 5 item variant
   ═══════════════════════════════════════════════════════════════ */

.why-cards--5{
  grid-template-columns: repeat(5, 1fr);
}

/* ═══════════════════════════════════════════════════════════════
   5. FIRST HOUR — 5 steps
   ═══════════════════════════════════════════════════════════════ */

.first-hour__grid{
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
}

.first-hour__step{
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 20px 18px;
  background: #fff;
  border: 1px solid var(--blue-line);
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(7,54,111,.04);
}
.first-hour__num{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--navy);
  color: #fff;
  font-size: 14px;
  font-weight: 800;
  margin-bottom: 4px;
}
.first-hour__title{
  margin: 0;
  color: var(--navy-deep);
  font-size: 14px;
  font-weight: 800;
  line-height: 1.3;
}
.first-hour__desc{
  margin: 0;
  color: #5a7191;
  font-size: 12.5px;
  line-height: 1.5;
}

/* ═══════════════════════════════════════════════════════════════
   6. INSURANCE + AUTHORITIES SPLIT
   ═══════════════════════════════════════════════════════════════ */

.city-split__grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  align-items: stretch;
}
.city-split__card{
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 26px 26px 24px;
  background: #fff;
  border: 1px solid var(--blue-line);
  border-radius: 12px;
  box-shadow: 0 4px 14px rgba(7,54,111,.06);
}
.city-split__card h2{
  margin: 0;
  color: var(--navy-deep);
  font-size: 20px;
  font-weight: 800;
  line-height: 1.25;
}
.city-split__card > p{
  margin: 0;
  color: #526d86;
  font-size: 13.5px;
  line-height: 1.55;
}
.city-split__subtitle{
  font-weight: 700 !important;
  color: #294565 !important;
  margin-top: 4px !important;
}
.city-split__card .check-list{
  margin: 6px 0 14px;
}
.city-split__card .button{
  align-self: flex-start;
  margin-top: auto;
}
.city-split__note{
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--blue-line);
  font-size: 12px !important;
  color: #71869b !important;
  line-height: 1.5 !important;
}

/* Authority list */
.authority-list{
  list-style: none;
  padding: 0;
  margin: 6px 0 14px;
}
.authority-list li {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 14px 0;
}
.authority-list li:last-child{
  border-bottom: 0;
}
.authority-list__icon {
    position: relative;
    display: block;
    width: 34px;
    height: 34px;
    min-width: 34px;
    min-height: 34px;
    border-radius: 8px;
    background: var(--blue-soft);
    color: var(--navy-deep);
    flex-shrink: 0;
}

.authority-list__icon svg {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 18px;
    height: 18px;
    transform: translate(-50%, -50%);
}
.authority-list strong{
  display: block;
  color: var(--navy-deep);
  font-size: 13.5px;
  font-weight: 800;
  line-height: 1.3;
  margin-bottom: 2px;
}
.authority-list span{
  display: block;
  color: #5a7191;
  font-size: 12.5px;
  line-height: 1.45;
}

/* ═══════════════════════════════════════════════════════════════
   7. HOUSING STOCK — photo + text
   ═══════════════════════════════════════════════════════════════ */

.housing-stock__grid{
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 40px;
  align-items: center;
}
.housing-stock__media{
  min-height: 320px;
  aspect-ratio: 4 / 3;
  border-radius: 12px;
  background: #dce7ed url("detroit-neighborhood.webp") center/cover no-repeat;
  box-shadow: 0 10px 30px rgba(7,54,111,.10);
}
.housing-stock__text p{
  margin: 0 0 14px;
  color: #3d5b78;
  font-size: 15px;
  line-height: 1.65;
}
.housing-stock__text p:last-child{ margin-bottom: 0; }

/* ═══════════════════════════════════════════════════════════════
   8. AREAS WE SERVE — map + lists
   ═══════════════════════════════════════════════════════════════ */

.city-areas__grid{
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 40px;
  align-items: start;
}
.city-areas__map{
  min-height: 300px;
  aspect-ratio: 1 / 1;
  border-radius: 12px;
  background: #eaf6ff url("detroit-map.png") center/contain no-repeat;
  border: 1px solid var(--blue-line);
}
.city-areas__lists{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
}
.city-areas__label{
  margin: 0 0 12px;
  padding-bottom: 8px;
  color: var(--navy-deep);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: -0.01em;
  border-bottom: 2px solid var(--blue-line);
}
.city-areas__list{
  list-style: none;
  padding: 0;
  margin: 0;
}
.city-areas__list li{
  position: relative;
  padding-left: 16px;
  margin: 6px 0;
  color: #365675;
  font-size: 13px;
  line-height: 1.5;
}
.city-areas__list li::before{
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--blue);
  opacity: .55;
}
.city-areas__note{
  margin: 24px 0 0;
  padding: 12px 16px;
  background: var(--blue-soft);
  border-left: 3px solid var(--blue);
  border-radius: 4px;
  color: #3d5b78;
  font-size: 13px;
  line-height: 1.55;
}

/* ═══════════════════════════════════════════════════════════════
   9. NEARBY CITIES (AUTO LOOP)
   ═══════════════════════════════════════════════════════════════ */

.nearby-cities__grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

.nearby-cities__grid > a{
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 10px 12px;
  background: #fff;
  border: 1px solid var(--blue-line);
  border-radius: var(--radius);
  color: var(--navy-deep);
  font-size: 13px;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  transition: transform .18s ease, border-color .18s ease, background .18s ease, color .18s ease, box-shadow .18s ease;
}
.nearby-cities__grid > a:hover,
.nearby-cities__grid > a:focus-visible{
  border-color: var(--blue);
  background: #f7fbff;
  color: var(--blue);
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(7,54,111,.08);
  text-decoration: none;
}

.nearby-cities__grid > a.nearby-cities__view-all{
  grid-column: 1 / -1;
  background: var(--navy);
  border-color: var(--navy);
  color: #fff;
  font-weight: 800;
  margin-top: 8px;
}
.nearby-cities__grid > a.nearby-cities__view-all:hover{
  background: var(--navy-deep);
  border-color: var(--navy-deep);
  color: #fff;
}

/* ═══════════════════════════════════════════════════════════════
   10. FAQ — 2 COLUMN GRID
   ═══════════════════════════════════════════════════════════════ */

.faq-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 16px;
  align-items: start;
}
.faq-grid details{
  padding: 13px 16px;
  border: 1px solid #d7e6f2;
  border-radius: 7px;
  background: #fff;
  margin: 0;
}
.faq-grid summary{
  cursor: pointer;
  color: var(--navy-deep);
  font-weight: 700;
  font-size: 14px;
  line-height: 1.4;
}
.faq-grid details p{
  margin: 9px 0 0;
  color: #49647d;
  font-size: 13px;
  line-height: 1.55;
}

/* ═══════════════════════════════════════════════════════════════
   11. RESPONSIVE — TABLET (980px)
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 980px){
  /* Hero CTAs */
  .hero__cta-row .button{
    min-width: 0;
    flex: 1 1 auto;
  }

  /* Local Intro stack */
  .city-intro__grid{
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .city-intro__media{
    min-height: 260px;
    aspect-ratio: 16 / 10;
  }

  /* Services — 4 → 2 */
  .city-services__grid{
    grid-template-columns: repeat(2, 1fr);
  }

  /* Why cards — 5 → 3 */
  .why-cards--5{
    grid-template-columns: repeat(3, 1fr);
  }

  /* First hour — 5 → 3 */
  .first-hour__grid{
    grid-template-columns: repeat(3, 1fr);
  }

  /* Split stacks */
  .city-split__grid{
    grid-template-columns: 1fr;
  }

  /* Housing stock stacks */
  .housing-stock__grid{
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .housing-stock__media{
    min-height: 240px;
    aspect-ratio: 16 / 10;
  }

  /* Areas — stack */
  .city-areas__grid{
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .city-areas__map{
    min-height: 260px;
    aspect-ratio: 16 / 10;
  }

  /* Nearby — 4 → 3 */
  .nearby-cities__grid{
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ═══════════════════════════════════════════════════════════════
   12. RESPONSIVE — MOBILE (700px)
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 700px){
  /* Hero CTAs stacked */
  .hero__cta-row{
    flex-direction: column;
  }
  .hero__cta-row .button{
    width: 100%;
    justify-content: center;
  }

  /* Services — 2 → 1 */
  .city-services__grid{
    grid-template-columns: 1fr;
    gap: 12px;
  }

  /* Why — 3 → 1 */
  .why-cards--5{
    grid-template-columns: 1fr;
  }

  /* First hour — 3 → 1 */
  .first-hour__grid{
    grid-template-columns: 1fr;
    gap: 12px;
  }

  /* Areas lists stack */
  .city-areas__lists{
    grid-template-columns: 1fr;
    gap: 24px;
  }

  /* Nearby — 3 → 2 */
  .nearby-cities__grid{
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
  .nearby-cities__grid > a{
    font-size: 12.5px;
    min-height: 44px;
  }

  /* FAQ 2 → 1 */
  .faq-grid{
    grid-template-columns: 1fr;
  }
}

/* ═══════════════════════════════════════════════════════════════
   13. SMALL MOBILE (380px)
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 380px){
  .nearby-cities__grid{
    grid-template-columns: 1fr;
  }
}

/* ═══════════════════════════════════════════════════════════════
   14. REDUCED MOTION
   ═══════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce){
  .city-service-card:hover,
  .nearby-cities__grid > a:hover{
    transform: none;
  }
  .city-service-card:hover .city-service-card__arrow{
    transform: none;
  }
}
.section-footnote {
  max-width: 780px;
  margin: 28px auto 0;
  text-align: center;
  font-size: 15px;
  line-height: 1.6;
  color: #4a5561;
}
.city-service-card__crisis {
  margin-top: 0.6rem;
  padding: 0.5rem 0.7rem;
  background: #fef2f2;
  border-left: 3px solid #b8272c;
  border-radius: 4px;
  font-size: 0.8rem;
  line-height: 1.5;
  color: #7f1d1d;
}
.city-service-card__crisis strong {
  color: #b8272c;
}

/* ══════════════════════════════════════════════════════
   Cost Section
   ══════════════════════════════════════════════════════ */

.cost-section {
    /* Uses theme vars — inherits --navy-deep, --blue, --green */
}

/* ── Group title (Crime & Trauma / Biohazard / Property) ── */
.cost-group__title {
    margin: 40px 0 20px;
    padding-left: 14px;
    font-size: clamp(18px, 1.4vw, 22px);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.3px;
    color: var(--navy-deep, #0d2a4a);
    border-left: 4px solid var(--green, #1a7f4b);
}

.cost-group__title:first-of-type {
    margin-top: 0;
}

/* ── Grid of cost cards ──────────────────────────────── */
.cost-section__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 8px;
}

/* ── Individual cost card ────────────────────────────── */
.cost-card {
    display: flex;
    flex-direction: column;
    padding: 22px 18px;
    background: #f7f9fc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.cost-card:hover {
    box-shadow: 0 4px 12px rgba(13, 42, 74, 0.06);
    transform: translateY(-2px);
}

.cost-card__title {
    margin: 0 0 8px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.35;
    color: #4a5568;
    letter-spacing: 0.2px;
    text-transform: uppercase;
}

.cost-card__range {
    margin: 0 0 10px;
    font-size: clamp(22px, 1.8vw, 28px);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.5px;
    color: var(--green, #1a7f4b);
}

.cost-card__note {
    margin: 0;
    font-size: 13px;
    line-height: 1.55;
    color: #5a6b7f;
}

/* ── Notes block (green background) ──────────────────── */
.cost-section__notes {
    margin-top: 40px;
    padding: 22px 26px;
    background: #f0f7f3;
    border-radius: 10px;
    border-left: 4px solid var(--green, #1a7f4b);
}

.cost-section__notes p {
    margin: 0 0 12px;
    font-size: 15px;
    line-height: 1.65;
    color: #2d3748;
}

.cost-section__notes p:last-child {
    margin-bottom: 0;
}

.cost-section__notes strong {
    color: var(--navy-deep, #0d2a4a);
    font-weight: 700;
}

/* ── CTA block ───────────────────────────────────────── */
.cost-section__cta {
    margin-top: 40px;
    padding-top: 28px;
    border-top: 1px solid #e2e8f0;
    text-align: center;
}

.cost-section__cta p {
    margin: 0 0 18px;
    font-size: 16px;
    line-height: 1.5;
    color: #2d3748;
}

/* ── Responsive ──────────────────────────────────────── */
@media (max-width: 1024px) {
    .cost-section__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .cost-section__grid {
        grid-template-columns: 1fr;
    }

    .cost-group__title {
        margin: 32px 0 16px;
    }

    .cost-section__notes {
        padding: 18px 20px;
    }
}
.cost-section__disclaimer {
  font-size: 0.85rem;
  color: #718096;
  font-style: italic;
  margin-top: 4px;
  line-height: 1.5;
}