/* 8 Furlong Consulting — services-overview.css (services.html only)
   Layout only. Mobile-first → 768px → 1024px; serpentine desktop-only. */

.svc-hero__inner { text-align: center; max-width: 900px; margin: 0 auto; }
.svc-hero__inner .lede { margin: 24px auto 0; max-width: 680px; }
.svc-hero__cta { display: flex; flex-direction: column; align-items: center; gap: 24px; margin-top: 32px; }

/* §2 — fragmentation: mobile stacks heading → image → body → (no CTA)
   .svc-problem__body is display:contents so the image can sit between the heading and
   the copy; its children become items of this container. Named grid areas cannot
   express that: two elements resolved to "head" and three to "body", and items sharing
   an area are placed in the SAME cell, so each group painted on top of itself. Flex
   order gives the identical sequence without stacking, and survives a fourth paragraph.
   Fixed 2026-09-08 after John caught it on an iPhone. */
.svc-problem__grid { display: flex; flex-direction: column; }
.svc-problem__body { display: contents; }
.svc-problem__body .eyebrow { order: 1; }
.svc-problem__body h2 { order: 2; margin-bottom: 0; }
.svc-problem__media { order: 3; margin: 32px 0; }
.svc-problem__body p { order: 4; margin-top: 0; }
.svc-problem__body p + p { margin-top: 16px; }
.svc-problem__media img { border-radius: var(--radius-card); width: 100%; height: auto; }

/* §3 — pillars, numbered rows */
.svc-pillars__eyebrow { display: block; text-align: center; margin-bottom: 40px; }
.svc-pillar { padding: 36px 0; border-top: 1px solid var(--line-light); display: grid; gap: 18px; }
.svc-pillar:last-child { border-bottom: 1px solid var(--line-light); }
.svc-pillar__num { font-size: 44px; font-weight: 700; color: var(--tan); opacity: .55; line-height: 1; }
.svc-pillar__body p { margin: 18px 0 22px; }

/* §4 + §5 */
.svc-connect__inner { text-align: center; max-width: 760px; margin: 0 auto; }
.svc-connect__inner p { margin-top: 22px; }
.svc-closer__inner { text-align: center; max-width: 820px; margin: 0 auto; }
.svc-closer__inner p { margin: 22px auto 0; max-width: 56ch; }
.svc-closer__inner .btn { margin-top: 32px; }

@media (min-width: 768px) {
  .svc-hero__cta { flex-direction: row; justify-content: center; gap: 36px; }
  .svc-pillar { grid-template-columns: 120px 1fr; gap: 32px; padding: 48px 0; }
  .svc-pillar__num { font-size: 64px; }
}

@media (min-width: 1024px) {
  /* §2 serpentine: copy left, image right */
  .svc-problem__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; grid-template-areas: "body media"; }
  .svc-problem__body { grid-area: body; }
  .svc-problem__media { grid-area: media; order: 0; margin: 0; }
  .svc-problem__body { display: block; }
  .svc-problem__body h2 { margin: 0 0 4px; }
  .svc-problem__body p { margin-top: 20px; }
  .svc-problem__media { position: relative; }
  .svc-problem__media::after { content: ""; position: absolute; right: -14px; bottom: -14px; left: 34px; top: 34px; border: 1px solid #D8C9AE; border-radius: var(--radius-card); z-index: -1; }

  /* §3 serpentine: number column alternates sides */
  .svc-pillar { grid-template-columns: 200px 1fr; gap: 72px; padding: 64px 0; max-width: 1100px; margin: 0 auto; align-items: start; }
  .svc-pillar--alt { grid-template-columns: 1fr 200px; }
  .svc-pillar--alt .svc-pillar__num { order: 2; text-align: right; }
  .svc-pillar--alt .svc-pillar__body { order: 1; }
  .svc-pillar__num { font-size: 88px; }
}