/* ==========================================================================
   SERVICE DETAIL PAGE TEMPLATE — banner (uses .hero-compact from
   hero-slider.css), overview, feature/checklist grid, process steps,
   related-services strip. Shared by every service-*.html page.
   ========================================================================== */

.check-list { display: grid; grid-template-columns: 1fr; gap: 0.9rem; }
@media (min-width: 640px) { .check-list { grid-template-columns: repeat(2, 1fr); } }
.check-list li { display: flex; gap: 0.75rem; align-items: flex-start; font-size: 0.92rem; color: var(--text); line-height: 1.5; }
.check-list li .ico {
  flex-shrink: 0; height: 1.5rem; width: 1.5rem; margin-top: 0.05rem;
  border-radius: 999px; background: var(--green-100); color: var(--green-600);
  display: flex; align-items: center; justify-content: center; font-size: 0.72rem; font-weight: 800;
}
html[data-theme="dark"] .check-list li .ico { background: rgba(34,197,94,0.15); }

/* Numbered process steps */
.process-steps { display: grid; grid-template-columns: 1fr; gap: 2.25rem; }
@media (min-width: 768px) { .process-steps { grid-template-columns: repeat(4, 1fr); gap: 1.5rem; } }
.process-step { position: relative; text-align: left; }
.process-step .num {
  height: 2.85rem; width: 2.85rem; border-radius: 999px;
  background: linear-gradient(135deg, var(--red-600), var(--rose-500));
  color: #fff; display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 1.05rem; margin-bottom: 1rem; box-shadow: 0 10px 18px -8px rgba(220,38,38,0.5);
}
.process-step:not(:last-child)::after {
  content: ''; position: absolute; top: 1.42rem; left: calc(2.85rem + 0.6rem);
  width: calc(100% - 2.85rem - 0.6rem); height: 2px; background: var(--border); display: none;
}
@media (min-width: 768px) { .process-step:not(:last-child)::after { display: block; } }
.process-step h3 { font-weight: 800; color: var(--text-strong); margin-bottom: 0.4rem; font-size: 1rem; }
.process-step p { color: var(--text-muted); font-size: 0.87rem; line-height: 1.6; }

/* Related-services strip */
.related-strip { display: grid; grid-template-columns: 1fr; gap: 1.25rem; }
@media (min-width: 640px) { .related-strip { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .related-strip { grid-template-columns: repeat(4, 1fr); } }
.related-card {
  background: var(--surface); border: 1px solid var(--border-soft); border-radius: var(--radius-2xl);
  padding: 1.25rem; display: flex; flex-direction: column; gap: 0.6rem; transition: all 0.2s ease;
}
.related-card:hover { border-color: rgba(239,68,68,0.35); transform: translateY(-3px); box-shadow: var(--shadow-md); }
.related-card .ico { font-size: 1.5rem; }
.related-card h3 { font-weight: 800; font-size: 0.92rem; color: var(--text-strong); }
.related-card span.go { font-size: 0.78rem; font-weight: 700; color: var(--red-600); }

/* Two-column overview (copy + supporting image) */
.overview-grid { display: grid; grid-template-columns: 1fr; gap: 2.5rem; align-items: center; }
@media (min-width: 1024px) { .overview-grid { grid-template-columns: 6fr 6fr; gap: 3.5rem; } }
.overview-grid > * { min-width: 0; }
.overview-copy p { color: var(--text-muted); line-height: 1.75; margin-top: 1rem; }
.overview-media { position: relative; border-radius: var(--radius-3xl); overflow: hidden; box-shadow: var(--shadow-xl); aspect-ratio: 4/3; }
.overview-media img { width: 100%; height: 100%; object-fit: cover; }

/* Overlapping image stack (What's Included media) — two images offset and
   rotated, lifting to the front on hover/focus. */
.overlap-stack { position: relative; width: 100%; height: 19rem; margin: 0 auto; max-width: 26rem; }
@media (min-width: 640px) { .overlap-stack { height: 22rem; } }
@media (min-width: 1024px) { .overlap-stack { max-width: none; } }
.overlap-img {
  position: absolute; border-radius: var(--radius-2xl); overflow: hidden;
  border: 5px solid var(--surface-raised); box-shadow: var(--shadow-lg);
  transition: transform 0.35s cubic-bezier(.2,.8,.2,1), box-shadow 0.35s ease;
}
.overlap-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.overlap-img.i1 { top: 0; left: 0; width: 62%; aspect-ratio: 4/3; z-index: 1; transform: rotate(-4deg); }
.overlap-img.i2 { top: 22%; left: 32%; width: 58%; aspect-ratio: 4/3; z-index: 2; transform: rotate(3deg); }
@media (min-width: 640px) { .overlap-img.i1 { left: 2%; } .overlap-img.i2 { left: 34%; } }
.overlap-stack:hover .overlap-img, .overlap-stack:focus-within .overlap-img { transform: scale(0.98); }
.overlap-img:hover, .overlap-img:focus-within {
  transform: translateY(-16px) scale(1.06) rotate(0deg) !important;
  z-index: 5; box-shadow: var(--shadow-xl);
}
@media (prefers-reduced-motion: reduce) { .overlap-img { transition: none; } }

/* Sticky quote sidebar (optional use on service pages) */
.quote-box {
  background: var(--surface); border: 1px solid var(--border-soft); border-radius: var(--radius-3xl);
  padding: 1.75rem; text-align: center;
}
.quote-box h4 { font-family: var(--font-display); font-weight: 800; font-size: 1.1rem; color: var(--text-strong); margin-bottom: 0.5rem; }
.quote-box p { color: var(--text-muted); font-size: 0.87rem; margin-bottom: 1.25rem; }