/* ==========================================================================
   SERVICE-PAGE.CSS — shared across all individual /services/[slug].php pages.
   Loaded via $extraStyles in includes/service-page.php, NOT per-page —
   every one of the 33 service pages uses this exact same stylesheet.
   Most of what a service page needs already exists in components.css
   (service-grid, service-chip, stat-card, faq, process, final-cta); this
   file only holds what's unique to the service-detail page type.
   ========================================================================== */

/* ---------- Breadcrumb ---------- */
/* Breadcrumb base layout (positioning) is handled globally in components.css.
   We just ensure it doesn't have conflicting padding. */
.breadcrumb {
  margin: 0 auto; max-width: var(--container);
  font-family: var(--font-label); font-size: 0.78rem; letter-spacing: 0.03em; color: var(--graphite);
}
.breadcrumb a { color: var(--graphite); transition: color .25s; }
.breadcrumb a:hover { color: var(--green-deep); }
.breadcrumb span[aria-current] { color: var(--ink-soft); }
.breadcrumb .sep { color: var(--paper-line); margin: 0 4px; }

/* ---------- Service hero ---------- */
.service-hero { padding: 150px 0 70px; text-align: center; }
.service-hero .wrap { max-width: 820px; }
.service-hero h1 { margin-bottom: 22px; }
.service-hero .lead { max-width: none; margin-bottom: 36px; margin-inline: auto; }
.service-hero__ctas { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; }

/* ---------- Problem block ---------- */
.problem-block { max-width: 720px; }
.problem-block h2 { margin-bottom: 18px; }

/* ---------- Deliverables (check-list) ---------- */
.check-list { display: flex; flex-direction: column; gap: 16px; max-width: 720px; }
.check-list li { display: flex; gap: 14px; align-items: flex-start; font-size: 1.05rem; color: var(--ink-soft); line-height: 1.6; }
.check-list svg { width: 20px; height: 20px; flex-shrink: 0; margin-top: 4px; color: var(--green); }

/* ---------- Process (3-step modifier) ---------- */
.process.process--three { grid-template-columns: 1fr; }
@media (min-width: 640px) { .process.process--three { grid-template-columns: repeat(3, 1fr); } }
/* Tablet: three columns already fit three items well (no awkward orphan
   row), but the shared .step padding (components.css, 36px 32px) was tuned
   for wider columns — at 640-1023px it left very little room for the
   heading/copy inside each card, forcing heavy text wrap. Scoped to this
   service-page variant only, so the homepage's own .process usage is
   untouched. */
@media (min-width: 640px) and (max-width: 1023px) {
  .process.process--three .step { padding: 26px 22px; }
}

/* ---------- Insight quote ---------- */
.insight-quote {
  max-width: 720px; border-left: 3px solid var(--green); padding: 8px 0 8px 30px; margin-top: 40px;
}
.insight-quote p { font-family: var(--font-display); font-style: italic; font-size: 1.35rem; line-height: 1.6; color: var(--ink-soft); }

/* ---------- Related product callout ---------- */
.product-callout {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px;
  background: var(--paper); border: 1px solid var(--paper-line); padding: 36px 40px; margin-top: 50px;
  border-radius: 2px; position: relative; overflow: hidden;
}
.product-callout__label { font-family: var(--font-label); font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--green-deep); margin-bottom: 8px; display: block; }
.product-callout__name { font-family: var(--font-display); font-size: 1.5rem; font-weight: 600; margin-bottom: 6px; }
.product-callout__desc { font-size: 0.95rem; color: var(--ink-soft); line-height: 1.6; max-width: 52ch; }
.product-callout a.btn { flex-shrink: 0; }

/* ==========================================================================
   DARK MODE OVERRIDES (For the global .site--dark video background)
   ========================================================================== */
.site--dark .breadcrumb span[aria-current] { color: var(--paper); }
.site--dark .breadcrumb a { color: rgba(255,255,255,0.6); }
.site--dark .breadcrumb a:hover { color: #fff; }
.site--dark .breadcrumb .sep { color: rgba(255,255,255,0.2); }

.site--dark .check-list li { color: var(--paper); }

.site--dark .insight-quote p { color: var(--paper); }

.site--dark .product-callout {
  background: rgba(21, 28, 16, 0.6);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-color: rgba(163, 255, 71, 0.12);
}
.site--dark .product-callout__label { color: var(--green); }
.site--dark .product-callout__desc { color: rgba(255,255,255,0.8); }