/* Phase 5 — page-body prose sections (service/location/about explainer content).
   Scoped to .mh-prose classes. Same tokens as hero.css/services.css/faq.css.
   Reading-width column (not full 1180px) is the SAME convention the original
   .bc-prose__inner already used (72ch) — not a new pattern, just re-skinned. */

.mh-prose {
  --mh-ink: #101418;
  --mh-paper: #FFFFFF;
  --mh-mist: #F1F3F4;
  --mh-line: #E2E5E7;
  --mh-signal: #E4572E;
  --mh-slate: #53595E;
  --mh-steel: #3A4048;

  background: var(--mh-paper);
  padding: 40px 20px;
}
.mh-prose--alt { background: var(--mh-mist); }
.mh-prose--dark {
  background: var(--mh-ink);
}
.mh-prose--dark .mh-prose__title,
.mh-prose--dark .mh-prose__body h3 { color: #FFFFFF; }
.mh-prose--dark .mh-prose__body p,
.mh-prose--dark .mh-prose__body li { color: rgba(255,255,255,.82); }
.mh-prose--dark .mh-prose__body strong { color: #FFFFFF; }

.mh-prose__inner {
  max-width: 1180px;
  margin: 0 auto;
}

.mh-prose__body {
  max-width: none; /* match the site's standard 1180px container width */
}
.mh-prose--grid .mh-prose__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
  align-items: center;
}
.mh-prose--grid .mh-prose__body { max-width: none; }
@media (min-width: 900px) {
  .mh-prose--grid .mh-prose__inner { grid-template-columns: 1.1fr 0.9fr; }
}

.mh-prose__title {
  font-family: 'Oswald', 'Arial Narrow', sans-serif;
  font-weight: 600;
  font-size: clamp(1.35rem, 1.1rem + 1vw, 1.85rem);
  line-height: 1.2;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--mh-ink);
  margin: 0 0 16px;
  text-wrap: balance;
}

.mh-prose__body p {
  font-family: 'Inter', 'Segoe UI', sans-serif;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--mh-slate);
  margin: 0 0 16px;
}
.mh-prose__body p:last-child { margin-bottom: 0; }
.mh-prose__body strong { color: var(--mh-ink); }
.mh-prose__body h3 {
  font-family: 'Oswald', sans-serif;
  font-weight: 600;
  font-size: 1.15rem;
  text-transform: uppercase;
  color: var(--mh-ink);
  margin: 0 0 12px;
}
.mh-prose__body ul { padding-left: 1.2em; color: var(--mh-slate); font-family: 'Inter', sans-serif; }
.mh-prose__body li { margin-bottom: 8px; line-height: 1.5; }

.mh-prose__img {
  width: 100%;
  height: auto;
  border-radius: 6px;
  border: 1px solid var(--mh-line);
}

/* labeled-paragraph card grid — used where source content is a series of
   <strong>Label</strong> + description paragraphs (naturally card-shaped content).
   Cards over read-more here: nothing needs hiding when it already scans well. */
.mh-label-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin: 8px 0 20px;
}
@media (min-width: 640px) {
  .mh-label-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .mh-label-grid--3 { grid-template-columns: repeat(3, 1fr); }
}
.mh-label-card {
  background: var(--mh-paper, #FFFFFF);
  border: 1px solid var(--mh-line, #E2E5E7);
  border-radius: 6px;
  box-shadow: 0 1px 2px rgba(16,20,24,.06);
  padding: 20px;
}
.mh-label-card__title {
  font-family: 'Oswald', sans-serif;
  font-weight: 600;
  font-size: 1rem;
  text-transform: uppercase;
  color: var(--mh-ink, #101418);
  margin: 0 0 8px;
}
.mh-label-card__body {
  font-family: 'Inter', sans-serif;
  font-size: .9375rem;
  line-height: 1.55;
  color: var(--mh-slate, #53595E);
  margin: 0;
}

/* progressive disclosure — breaks up long prose blocks. First existing paragraph is
   always visible; the rest of the ORIGINAL text (unedited) sits behind a native
   <details> toggle. Nothing is removed — only what's default-visible changes. */
.mh-readmore {
  margin-top: 4px;
}
.mh-readmore__toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 4px 0;
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: .875rem;
  color: var(--mh-signal, #E4572E);
  cursor: pointer;
  list-style: none;
}
.mh-readmore__toggle::-webkit-details-marker { display: none; }
.mh-readmore__toggle::after {
  content: "";
  width: 8px; height: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  margin-top: -3px;
  transition: transform 150ms ease-out;
}
details[open] > .mh-readmore__toggle::after { transform: rotate(-135deg); margin-top: 3px; }
.mh-readmore__toggle:focus-visible { outline: 2px solid var(--mh-signal, #E4572E); outline-offset: 2px; }
.mh-readmore__body { padding-top: 12px; }
.mh-readmore__body p:first-child { margin-top: 0; }

@media (prefers-reduced-motion: reduce) {
  .mh-readmore__toggle::after { transition: none; }
}

.mh-prose__cta {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 12px 22px;
  margin-top: 8px;
  background: var(--mh-signal);
  color: #fff;
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: .875rem;
  text-transform: uppercase;
  letter-spacing: .02em;
  text-decoration: none;
  border-radius: 4px;
}
.mh-prose__cta:hover { background: #C43F1C; }