/* =========================================================
   SERVICES DETAIL — shared stylesheet for the three service-
   detail pages (services/websites.html, services/automation.html,
   services/business-systems.html).

   Loaded alongside style.css + services.css, which already provide
   the established "editorial rail" system (.services-hero,
   .services-block, .services-split, .services-panel, .services-list,
   .services-steps, .services-subtitle) — reused here rather than
   duplicated, so the three detail pages visibly belong to the same
   family as the Services hub and each other.

   This file adds only the pieces that system doesn't already cover:
   - a problem-statement pull-quote (Automation / Business Systems);
   - an evidence/proof block (Websites — reuses .browser-mockup /
     .hero-testimonial / .hero-proof-label from style.css, not
     duplicated here);
   - a low-key cross-link note between Automation and Business Systems.
   ========================================================= */

/* ---------------- PROBLEM STATEMENT ----------------
   Editorial pull-quote opening the Automation / Business Systems
   pages — makes the plain-English problem framing visually distinct
   from a generic hero paragraph, without becoming a decorative quote
   block or a fake-dashboard graphic. */
.service-problem-statement {
  padding: 2.75rem 0 0.5rem;
}

.service-problem-statement blockquote {
  margin: 0;
  padding-left: 1.35rem;
  border-left: 3px solid var(--gold-connector, var(--gold));
  font-family: var(--font-sans);
  font-size: var(--step-h2, 1.5rem);
  font-weight: 300;
  line-height: var(--leading-snug, 1.35);
  color: var(--text);
  max-width: 42rem;
}

/* ---------------- EVIDENCE BLOCK (Websites page only) ----------------
   Two-column layout: text on the left, the reused browser-mockup +
   testimonial on the right. GPF content itself is unchanged — only
   this surrounding layout is new. */
.service-evidence {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 3rem;
  align-items: center;
}

.service-evidence-text .section-kicker {
  margin-bottom: var(--space-2, 0.5rem);
}

.service-evidence-text .section-title {
  margin: 0.3rem 0 0.9rem;
}

.service-evidence-text .services-list {
  margin-top: var(--space-3, 0.75rem);
}

.service-evidence-proof {
  display: flex;
  flex-direction: column;
  gap: var(--space-3, 0.75rem);
}

.service-evidence-link {
  margin-top: var(--space-2, 0.5rem);
  font-size: var(--step-label, 0.75rem);
  font-weight: 600;
  color: var(--gold-dark);
}

.service-evidence-link:hover {
  color: var(--gold);
}

/* ---------------- CROSS-LINK NOTE ----------------
   Automation <-> Business Systems, single sentence, low visual weight —
   not another card grid, not a forced reciprocal SEO link. */
.service-crosslink {
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--border-soft);
  font-size: 0.92rem;
  color: var(--muted);
}

.service-crosslink a {
  color: var(--gold-dark);
  border-bottom: 1px solid rgba(197, 165, 114, 0.55);
  padding-bottom: 0.05rem;
}

.service-crosslink a:hover {
  color: var(--gold);
  border-bottom-color: var(--gold);
}

/* ---------------- WHAT THIS ISN'T (honesty panel) ----------------
   Reuses .services-panel styling; this class only adjusts tone/weight
   slightly so the "what this isn't" note doesn't read as a generic
   sidebar tip. */
.service-panel-honest {
  color: var(--muted);
}

/* ---------------- SCOPE-DEPENDENT PRICING NOTE ---------------- */
.service-pricing-note {
  margin-top: 1.5rem;
  font-size: 0.92rem;
  line-height: 1.7;
  color: var(--muted);
  max-width: 44rem;
}

/* ---------------- EXPLORE OTHER SERVICES (compact cross-navigation) ----------------
   Restrained related-services pattern for the three service-detail pages —
   deliberately smaller/quieter than the Services-hub asymmetric module grid
   (equal-weight, no primary/secondary tiers), since this is secondary
   cross-navigation, not the hub itself. Whole-card links using normal
   anchors (no display: contents) — the anchor is a real flex box and is
   itself the direct grid item, so no wrapper/placement complications
   apply here the way they did for the hub's named-grid-area modules.
   Only the terminal "Explore..." cue is a <span>, matching the
   established convention, though no nested anchor risk exists here
   since title/body are plain text (h3/p), not links. */
.service-related {
  padding: 2.5rem 0 3rem;
  border-top: 1px solid var(--border-soft);
}

.service-related .section-kicker {
  margin-bottom: var(--space-4, 1rem);
}

.service-related-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4, 1rem);
}

.service-related-item {
  display: flex;
  flex-direction: column;
  gap: var(--space-2, 0.5rem);
  padding: var(--space-4, 1rem);
  border-radius: var(--radius);
  border: 1px solid var(--border-soft);
  color: inherit;
  text-decoration: none;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.service-related-item:hover,
.service-related-item:focus-visible {
  transform: translateY(-2px);
  border-color: var(--gold);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.06);
}

.service-related-item:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 4px;
}

.service-related-title {
  font-size: var(--step-h3, 1.125rem);
  font-weight: 600;
  line-height: var(--leading-snug, 1.35);
  margin: 0;
}

.service-related-body {
  font-size: var(--step-label, 0.75rem);
  line-height: var(--leading-normal, 1.6);
  color: var(--muted);
  margin: 0;
}

.service-related-cue {
  margin-top: var(--space-2, 0.5rem);
  font-size: var(--step-label, 0.75rem);
  font-weight: 600;
  color: var(--gold-dark);
  text-decoration: underline;
  text-decoration-color: rgba(197, 165, 114, 0.45);
  text-underline-offset: 3px;
}

.service-related-item:hover .service-related-cue,
.service-related-item:focus-visible .service-related-cue {
  color: var(--gold);
}

/* ---------------- RESPONSIVE ---------------- */
@media (max-width: 980px) {
  .service-evidence {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .service-problem-statement {
    padding: 2rem 0 0.25rem;
  }

  .service-problem-statement blockquote {
    font-size: 1.3rem;
  }
}

/* .service-related-grid: 3 equal columns with no intermediate step meant
   each card (title + body sentence + cue) was down to roughly 180-220px
   wide for most of the 641-900px range — narrow enough to wrap into a
   visibly cramped, unusually tall column well before the layout actually
   needed to stack. Raised from 640px so the grid stacks before that
   squeeze, not once it's already underway. */
@media (max-width: 760px) {
  .service-related-grid {
    grid-template-columns: 1fr;
  }
}