/* ==========================================================================
   Module: service-detail — service page body (hero → challenge → band →
   capabilities → proof → CTA)
   ========================================================================== */

/* ---------- Hero ---------- */
.m-service-detail__hero { padding-top: clamp(132px, 19vh, 220px); }
.m-service-detail__crumb {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: clamp(28px, 4vh, 44px);
  font-family: var(--font-mono);
  font-size: 12px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--light-6);
}
.m-service-detail__crumb a { color: var(--light-6); transition: color var(--t-base); }
.m-service-detail__crumb a:hover { color: var(--light); }
.m-service-detail__crumb .sep { color: var(--accent); }

.m-service-detail__hero-row {
  display: flex; flex-wrap: wrap; align-items: flex-end;
  gap: clamp(20px, 4vw, 56px);
}
.m-service-detail__num {
  font-weight: 500;
  font-size: clamp(3rem, 7vw, 6rem);
  line-height: .85;
  color: var(--accent);
}
.m-service-detail__title { flex: 1 1 420px; max-width: 16ch; color: var(--light); }
.m-service-detail__lead {
  margin-top: clamp(26px, 3.6vh, 40px);
  font-family: var(--font-sans); font-weight: 400;
  font-size: clamp(1.1rem, 1.6vw, 1.4rem); line-height: 1.5;
  color: var(--light-8); max-width: 60ch;
}
.m-service-detail__partners {
  display: flex; flex-wrap: wrap; gap: 12px;
  margin-top: clamp(26px, 3.5vh, 40px);
}
.m-service-detail__partner {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--light-7);
  border: 1px solid var(--bd-dark-28); padding: 9px 15px;
  transition: border-color var(--t-base), color var(--t-base);
}
.m-service-detail__partner:hover { border-color: var(--accent); color: var(--light); }
.m-service-detail__partner-sq { width: 6px; height: 6px; background: var(--accent); display: inline-block; }

/* ---------- (01) The challenge ---------- */
.m-service-detail__challenge-grid {
  display: flex; flex-wrap: wrap; gap: clamp(32px, 6vw, 96px);
}
.m-service-detail__challenge-label { flex: 0 1 240px; min-width: 170px; }
.m-service-detail__challenge-body { flex: 1 1 560px; max-width: 1000px; }
.m-service-detail__challenge-text {
  font-family: var(--font-sans); font-weight: 300;
  font-size: clamp(1.4rem, 2.6vw, 2.3rem); line-height: 1.34;
  letter-spacing: -.008em; color: var(--ink-strong);
}
.m-service-detail__challenge-text em,
.m-service-detail__challenge-text i {
  font-family: var(--font-serif); font-style: italic; font-weight: 500;
  color: var(--accent);
}

/* ---------- Hero image band (full-bleed plate under the dark hero) ---------- */
/* Tight top so the plate sits snug beneath the hero, generous bottom into (01). */
.m-service-detail__hero-band { padding-top: clamp(8px, 1.6vh, 22px); padding-bottom: clamp(48px, 7vh, 88px); }

/* ---------- Image band ---------- */
.m-service-detail__band { padding: clamp(8px, 1.5vh, 20px) var(--pad-x) clamp(56px, 8vh, 96px); }

/* ---------- Mid media band (second full-bleed plate near proof) ---------- */
.m-service-detail__media-band { padding-top: clamp(8px, 1.6vh, 22px); padding-bottom: clamp(48px, 7vh, 88px); }

/* ---------- (02) Capabilities ---------- */
.m-service-detail__cap-row {
  display: flex; flex-wrap: wrap; align-items: baseline;
  gap: clamp(20px, 4vw, 64px);
  padding: clamp(28px, 4vh, 44px) 0;
  border-top: 1px solid var(--bd-light-2);
}
.m-service-detail__cap-row:last-of-type { border-bottom: 1px solid var(--bd-light-2); }
.m-service-detail__cap-name { flex: 1 1 320px; max-width: 18ch; }
.m-service-detail__cap-desc {
  flex: 1 1 380px; max-width: 52ch;
  font-family: var(--font-sans); font-weight: 400;
  font-size: clamp(1rem, 1.3vw, 1.15rem); line-height: 1.6;
  color: var(--body);
}

/* Callout (exclusive provider note) */
.m-service-detail__callout {
  margin-top: clamp(34px, 5vh, 52px);
  border-left: 3px solid var(--accent);
  padding: clamp(20px, 3vh, 28px) clamp(20px, 3vw, 32px);
  background: rgba(190, 58, 43, .05);
}
.m-service-detail__callout-label {
  font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 10px;
}
.m-service-detail__callout-text {
  font-family: var(--font-sans); font-weight: 400;
  font-size: clamp(1.02rem, 1.4vw, 1.22rem); line-height: 1.55;
  color: var(--ink-strong-2); max-width: 70ch;
}
.m-service-detail__callout-text strong { font-weight: 600; }

/* ---------- (03) Proof (grid-texture dark) ---------- */
.m-service-detail__proof { background: var(--dark-3); color: var(--light-body); }
.m-service-detail__grid-texture {
  background:
    repeating-linear-gradient(0deg, rgba(236,231,220,.025) 0 1px, transparent 1px 44px),
    repeating-linear-gradient(90deg, rgba(236,231,220,.025) 0 1px, transparent 1px 44px);
}
.m-service-detail__stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  border-top: 1px solid var(--bd-dark-18);
  margin-bottom: clamp(40px, 6vh, 64px);
}
.m-service-detail__stat {
  padding: clamp(26px, 4vh, 40px) clamp(20px, 2vw, 32px);
  border-bottom: 1px solid var(--bd-dark-18);
  border-left: 1px solid var(--bd-dark-18);
}
.m-service-detail__stat:first-child { border-left: none; padding-left: 0; }
.m-service-detail__stat-value {
  font-weight: 600; font-size: clamp(2.2rem, 4vw, 3.2rem);
  line-height: .95; color: var(--light);
}
.m-service-detail__stat-note {
  font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--light-6); margin-top: 12px;
}

.m-service-detail__related {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: clamp(20px, 3vw, 40px);
  border: 1px solid var(--bd-dark-18);
  padding: clamp(20px, 3vh, 30px) clamp(20px, 3vw, 34px);
  color: var(--light-body);
  transition: background var(--t-base);
}
.m-service-detail__related:hover { background: rgba(236, 231, 220, .04); }
.m-service-detail__related-text { flex: 1 1 360px; }
.m-service-detail__related-label {
  font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--light-55); margin-bottom: 10px;
}
.m-service-detail__related-title {
  font-weight: 500; font-size: clamp(1.3rem, 2vw, 1.7rem); color: var(--light);
}

/* ---------- Next-service nav (before the CTA band) ---------- */
.m-service-detail__next { padding: 0 var(--pad-x); }
.m-service-detail__next-link {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: clamp(16px, 3vw, 36px);
  padding: clamp(28px, 4.5vh, 48px) 0;
  border-top: 1px solid var(--bd-light-2);
  border-bottom: 1px solid var(--bd-light-2);
  color: var(--ink);
}
.m-service-detail__next-label {
  flex: 0 0 auto;
  font-size: 11px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--muted);
}
.m-service-detail__next-title {
  flex: 1 1 auto;
  font-weight: 500; font-size: clamp(1.4rem, 2.6vw, 2.3rem);
  line-height: 1.08; letter-spacing: -.012em;
  color: var(--ink-strong);
  transition: color var(--t-base);
}
.m-service-detail__next-link:hover .m-service-detail__next-title { color: var(--accent); }
.m-service-detail__next-arrow {
  flex: 0 0 auto;
  font-size: clamp(1.3rem, 2vw, 1.7rem); color: var(--accent);
  transition: transform var(--t-base);
}
.m-service-detail__next-link:hover .m-service-detail__next-arrow { transform: translateX(8px); }

/* ---------- CTA band ---------- */
.m-service-detail__cta {
  padding: clamp(60px, 9vh, 110px) var(--pad-x);
  border-top: 1px solid var(--bd-dark-16);
}
.m-service-detail__cta-inner {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: 32px;
}
.m-service-detail__cta-title { max-width: 18ch; color: var(--light); }