/* ==========================================================================
   SPEARPOINT ADVISORS — Services Page Stylesheet
   ==========================================================================
   Page-specific rules only. Loaded after style.css, so it can rely on all
   design tokens (--color-*, --space-*, --fs-*, --radius-*, --shadow-*,
   --transition-*) and shared components already defined there.

   Reuses as-is (no rules needed here): .hero-decor (ambient glow orbs),
   .hero__cta-group, .services-section__header, .risk-section__header/
   .risk-section__lede, .risk-stats (the "50% / 80% / 80% / 10x" flat
   stat row — same one used on the homepage's 5 Ds section),
   .about-section__header, .credentials/.credential-tag, .value-card,
   .stats-grid, .cta-section, .btn, and — for "Who This Is For" — the
   full .process-grid/.process-step horizontal timeline (numbered
   circles + connecting line), column count overridden to 5 further
   down in this file via .who-timeline.

   .quote-block below (orange-tinted-background pull-quote, used for the
   "Real Cost" section's closing quote) is rebuilt locally per the
   per-page-CSS convention — same visual design as the-5-ds.css's/
   exit-planning.css's/operational-scaling-consulting.css's .quote-block
   (not style.css's .risk-quote, which this page used before — that one
   is just a left accent bar with no background fill).
   ========================================================================== */

/* --- "The Solution" header's 5 Ds tagline — style.css's emphasis variant
   is scoped under .risk-section__header (`.risk-section__header
   p.risk-section__lede--emphasis`), but this header uses
   .about-section__header instead, so it needs its own selector to pick
   up the same bold/italic/orange treatment. --- */
#solution .risk-section__lede--emphasis {
  font-size: var(--fs-lg);
  font-weight: var(--fw-black);
  font-style: italic;
  color: var(--color-orange);
  margin-bottom: var(--space-4);
}

/* --- Hero — deliberately NOT the About page's photo+bio two-column
   layout (that pattern is reserved for person-centric content — see the
   Trust section below, which reuses it with the real founder photo).
   Centered instead, with the homepage's ambient glow orbs as its visual
   signature for this hero. --- */
.services-hero {
  padding-top: calc(var(--nav-height) + var(--space-12));
  position: relative;
  z-index: 1;
  background-color: var(--color-bg);
}

.services-hero__content {
  position: relative;
  z-index: 2;
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
}

.services-hero__content h1 {
  margin-bottom: var(--space-6);
}

.services-hero__content p {
  margin: 0 auto var(--space-8);
}

.services-hero__content .hero__cta-group {
  justify-content: center;
}

/* --- Two-column media grid (image + content) — used for the Trust section
   (real founder photo), consistent with the About page's photo layout. --- */
.services-media-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: var(--space-16);
  align-items: center;
}

.services-col-content {
  position: relative;
  z-index: 2;
}

.services-col-content h1,
.services-col-content h2 {
  margin-bottom: var(--space-6);
}

.services-col-content p {
  margin-bottom: var(--space-6);
}

.services-col-content p:last-of-type {
  margin-bottom: var(--space-8);
}

/* .drivers-list__number is normally a plain digit (see the homepage's Six
   Drivers section) — sized up here since the Solution section reuses it
   with an icon instead, so the icon reads clearly inside the 44px circle. */
.drivers-list__number i {
  font-size: var(--fs-md);
}

/* --- Large faint corner icon — same visual idea as the About page's
   .story-chapter__mark: a decorative anchor so text-heavy sections don't
   read as flat. z-index: -1 (not 0) so it always renders behind normal
   in-flow content regardless of that content's own stacking. --- */
.services-mark {
  position: absolute;
  top: var(--space-10);
  right: var(--space-10);
  font-size: 8rem;
  line-height: 1;
  color: rgba(232, 83, 14, 0.07);
  pointer-events: none;
  z-index: -1;
  user-select: none;
}

/* --- Bulleted lists — global CSS resets <ul> to no markers, so both list
   moments on this page (qualifying criteria, cost-of-no-plan consequences)
   get a real icon-bullet treatment instead of a flat unstyled block. --- */
.services-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  max-width: 640px;
  margin: 0 auto var(--space-10);
}

.services-list li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  font-size: var(--fs-base);
  color: var(--color-text-2);
  line-height: var(--lh-relaxed);
  text-align: left;
}

.services-list li i {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  margin-top: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  background: rgba(232, 83, 14, 0.12);
  color: var(--color-orange);
  font-size: 0.65rem;
}

/* Muted variant — for the "cost of no plan" consequences list, so it reads
   as a distinct, less affirmative tone than the qualifying-criteria list. */
.services-list--muted li i {
  background: var(--color-surface-2);
  color: var(--color-text-4);
}


.services-followup {
  margin-top: var(--space-10);
}

/* --- Discover/Prepare/Decide teaser links — style.css's .process-step
   has no link slot (the homepage's own teaser doesn't need one); this
   page's "Solution" section reuses the-5-ds.css's .process-step__link
   treatment, rebuilt locally per the per-page-CSS convention. Also add
   breathing room below the grid, since .about-section__header (the next
   block here) only carries margin-bottom, not margin-top. --- */
.process-step__link {
  display: inline-block;
  margin-top: var(--space-2);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--color-orange);
}

#solution .process-grid {
  margin: var(--space-4) 0 var(--space-12);
}

/* --- "Here's how it connects" cards — reuses .stats-grid--outcomes'
   light-orange .value-card tint, but 4-per-row instead of the shared
   3-col default, so scoped to its own modifier rather than changing
   .stats-grid--outcomes everywhere it's used. --- */
.solution-grid {
  grid-template-columns: repeat(4, 1fr);
}

@media (max-width: 1024px) {
  .solution-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .solution-grid {
    grid-template-columns: 1fr;
  }
}

/* .about-section__header p (style.css) has no margin-bottom, so a .btn
   placed right after a paragraph — as in the Solution section's closing
   block — sits flush against it with no gap. Scoped here rather than in
   the shared stylesheet since that's the only place this exact pattern
   (paragraph immediately followed by a button) occurs. */
.about-section__header .btn {
  margin-top: var(--space-6);
}

/* .risk-stats sits inside the narrow left column of the "Problem"
   section's .split-panel__grid here (homepage runs it full-width
   instead), so its default 4-up/960px-max layout is too cramped —
   drop to 2-up and left-align, matching how the rest of this column
   reads. Scoped to a min-width query matching .split-panel__grid's own
   1024px collapse-to-1-column breakpoint (style.css) — .risk-stats
   already has its own ≤1024px single-column rules there, and since
   services.css loads after style.css, an unscoped override here would
   out-cascade those at any width and break the mobile stack. */
@media (min-width: 1025px) {
  .split-panel__content .risk-stats {
    grid-template-columns: repeat(2, 1fr);
    max-width: none;
    margin: var(--space-8) 0 0;
    text-align: center;
  }

  .split-panel__content .risk-stats__item:nth-child(2n) {
    padding-left: var(--space-6);
    border-left: 1px solid var(--color-border);
  }

  .split-panel__content .risk-stats__item:nth-child(2n+1) {
    padding-left: 0;
    border-left: none;
  }
}

/* Below 1024px .risk-stats collapses to the shared single-column, left-
   aligned layout (style.css) — built for the homepage's full-width version,
   but here it reads better kept centered like the desktop 2-up above. */
@media (max-width: 1024px) {
  .split-panel__content .risk-stats {
    text-align: center;
  }
}

/* --- "Who This Is For" — reuses the shared .process-grid/.process-step
   horizontal timeline component as-is (numbered circles on a connecting
   line, defined in style.css, scroll reveal handled by app.js). The
   shared grid defaults to 3 columns (built for 3-gate processes); this
   is the only page using it for 5, so the column count is overridden
   here, scoped to a min-width media query matching the shared
   component's own 1024px collapse-to-1-column breakpoint — this must
   stay a media query (not a bare rule) since services.css loads after
   style.css and would otherwise out-cascade that breakpoint at any
   viewport width, breaking the mobile stack. --- */
@media (min-width: 1025px) {
  .who-timeline {
    grid-template-columns: repeat(5, 1fr);
  }
}

/* Shared .process-step__text defaults to left-aligned (built for longer,
   multi-line process descriptions); these five profiles are short
   enough to read better centered under their titles. */
.who-timeline .process-step__text {
  text-align: center;
}

.who-closing-wrap {
  text-align: center;
  margin-top: var(--space-10);
}

/* --- "Real Cost of Having No Plan" cards — one row of 4 on desktop --- */
.cost-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-6);
  margin: 0 auto var(--space-12);
}

.cost-card {
  display: flex;
  align-items: flex-start;
  gap: var(--space-5);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-left: 3px solid rgba(232, 83, 14, 0.4);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  transition: border-color var(--transition-base), box-shadow var(--transition-base);
}

.cost-card:hover {
  border-color: var(--color-orange);
  border-left-color: var(--color-orange);
  box-shadow: 0 12px 40px rgba(232, 83, 14, 0.06);
  transform: translateY(-3px);
  transition: border-color var(--transition-base), box-shadow var(--transition-base), transform var(--transition-base);
}

.cost-card__icon-wrap {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-full);
  background: rgba(232, 83, 14, 0.1);
  color: var(--color-orange);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-md);
  flex-shrink: 0;
  margin-top: 2px;
}

.cost-card__text {
  font-size: var(--fs-base);
  color: var(--color-text-2);
  line-height: var(--lh-relaxed);
  margin: 0;
  text-align: left;
}

.cost-card__text strong {
  color: var(--color-text);
  font-weight: var(--fw-bold);
  display: block;
  margin-bottom: var(--space-1);
}

/* --- Quote block — orange-tinted-background pull-quote, same visual
   design as every other page's .quote-block (see file header comment). --- */
.quote-block {
  position: relative;
  max-width: 960px;
  margin: var(--space-8) auto 0;
  padding: var(--space-8) var(--space-10);
  background: linear-gradient(160deg, rgba(232, 83, 14, 0.07), transparent);
  border: 1px solid rgba(232, 83, 14, 0.2);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.quote-block__mark {
  position: absolute;
  top: var(--space-4);
  left: var(--space-6);
  font-size: 3rem;
  color: rgba(232, 83, 14, 0.15);
  z-index: 0;
}

.quote-block blockquote {
  position: relative;
  z-index: 1;
  font-size: var(--fs-lg);
  font-weight: var(--fw-medium);
  font-style: italic;
  color: var(--color-text);
  line-height: var(--lh-relaxed);
  text-align: center;
}


/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1024px) {
  .services-media-grid {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }

  .services-mark {
    font-size: 6rem;
  }

  .cost-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  /* Centered by design on tablet/desktop (see base rules and the
     max-width: 1024px rule above); left-aligned on phones only. */
  .services-hero__content,
  .split-panel__content .risk-stats,
  .who-timeline .process-step__text,
  .who-closing-wrap,
  .quote-block blockquote {
    text-align: left;
  }

  .services-mark {
    top: var(--space-6);
    right: var(--space-6);
    font-size: 4.5rem;
  }

  .cost-grid {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }

  .quote-block {
    padding: var(--space-6);
  }
}