/* ==========================================================================
   SPEARPOINT ADVISORS — For CEOs 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, .hero__cta-group,
   .eyebrow, .about-section__header, .drivers-list/.drivers-list__item/
   .drivers-list__number/.drivers-list__label/.drivers-list__text,
   .split-panel__grid/__content/__visual/__visual-icon, .process-grid/
   .process-step (base 3-col layout — this page uses it as-is, no override
   needed), .founder-section__grid/__image-wrap/__image/__content,
   .credentials/.credential-tag, .testimonials-section/.testimonials-slider/
   .testimonial-card, .section-decor, .cta-section, .btn. NOTE:
   .services-list is NOT in style.css — it's page-local to services.css
   (confirmed by grep), so it's rebuilt below rather than assumed shared.
   ========================================================================== */

/* --- Hero — centered like The 5 Ds/Services, with the primary+outline CTA
   pair this page's md copy actually calls for. --- */
.ceo-hero {
  padding-top: calc(var(--nav-height) + var(--space-12));
  position: relative;
  z-index: 1;
  background-color: var(--color-bg);
}

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

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

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

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

/* --- CEO Coaching Services — style.css's .drivers-list caps at
   max-width: 1000px and centers itself, which reads narrower than the
   full-width .section-header--split heading directly above it (that split
   header explicitly resets max-width: none). Match the two so the grid's
   left/right edges line up with the heading/subhead above it. --- */
#ceo-coaching-services .drivers-list {
  max-width: none;
  margin-left: 0;
  margin-right: 0;
}

/* --- The 5 Ds — style.css's .about-section__header caps at
   max-width: 1040px and centers itself, which reads narrower than the
   full-width section above it (.the-problem's .split-panel__grid runs
   edge-to-edge in the container). Match the two so this header/copy block
   and the risk-grid below it line up with the same left/right edges. --- */
#the-5-ds .about-section__header {
  max-width: none;
  margin-left: 0;
  margin-right: 0;
  text-align: left;
}

/* Body paragraphs — style.css's .about-section__header p carries no margin
   of its own (only the h2 above it does), so consecutive paragraphs ran
   flush against each other with no breathing room. */
#the-5-ds .about-section__header p {
  margin-bottom: var(--space-6);
}

/* --- The Solution — 3 points as a row of white cards (not the
   orange-tinted .value-card variant), icon-over-title-over-text instead
   of the shared .drivers-list's icon-left row layout, since that reads
   better in a narrow 3-up column than it would in a stacked full-width
   row. Widened to match the header above it, same reasoning as
   #the-5-ds. --- */
#the-solution .about-section__header {
  max-width: none;
  margin-left: 0;
  margin-right: 0;
  text-align: left;
}

#the-solution .drivers-list--stacked {
  grid-template-columns: repeat(3, 1fr);
  max-width: none;
  margin-left: 0;
  margin-right: 0;
  gap: var(--space-6);
  align-items: stretch;
}

/* Plain white card chrome (var(--color-surface), not the orange-tinted
   .value-card variant) around each point, instead of the bare icon+text
   row the shared .drivers-list uses everywhere else. Column layout
   (icon above title above text) instead of the base row layout. */
#the-solution .drivers-list--stacked .drivers-list__item {
  flex-direction: column;
  align-items: flex-start;
  padding: var(--space-8);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: border-color var(--transition-base), transform var(--transition-base);
}

#the-solution .drivers-list--stacked .drivers-list__number {
  margin-bottom: var(--space-4);
}

#the-solution .drivers-list--stacked .drivers-list__item:hover {
  border-color: var(--color-orange);
  transform: translateY(-3px);
}

/* style.css's base `p { max-width: 65ch }` rule (its global readability
   measure) still applies here since .drivers-list__text doesn't set its
   own max-width — that's what was capping these paragraphs well short of
   the now-full-width row. */
#the-solution .drivers-list--stacked .drivers-list__text {
  max-width: none;
}


#the-5-ds .about-section__header p:last-child {
  margin-bottom: 0;
}

/* Bold lede line gets extra room on top of the shared paragraph spacing,
   so it reads as a distinct beat between the heading and the risk-grid
   below it. Selector matches the p:last-child rule above on specificity
   exactly (id + 2 classes + element) so source order — this rule comes
   later — decides the tie; the lede is now the sole paragraph in its own
   header block, so it IS that last child. */
#the-5-ds .about-section__header p.ceo-5ds-lede {
  margin-top: var(--space-6);
  margin-bottom: var(--space-8);
  text-align: center;
}

/* --- Pillar flow — numbered vertical timeline for the "3 Pillars" section,
   modeled on peer-advisory-groups.css's .mastermind-flow (same idea: a
   rail-connected numbered list reads more prominent than a plain 3-col
   card/list grid). Rebuilt here rather than shared since that component is
   page-local by design. --- */
.pillar-flow {
  max-width: 860px;
  margin: 0 auto;
}

.pillar-flow__item {
  display: flex;
  gap: var(--space-6);
}

.pillar-flow__item:not(:last-child) {
  padding-bottom: var(--space-10);
}

.pillar-flow__marker {
  position: relative;
  flex-shrink: 0;
  width: 64px;
}

/* Rail — spans from the bottom of this item's circle to the top of the
   next one. Skipped on the last item since there's nothing to connect to. */
.pillar-flow__item:not(:last-child) .pillar-flow__marker::after {
  content: '';
  position: absolute;
  top: 64px;
  bottom: calc(var(--space-10) * -1);
  left: 50%;
  width: 2px;
  transform: translateX(-50%);
  background: var(--color-border);
}

.pillar-flow__number {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: var(--radius-full);
  background: linear-gradient(135deg, var(--color-orange), var(--color-orange-hover));
  color: var(--color-white);
  font-size: var(--fs-lg);
  font-weight: var(--fw-black);
}

.pillar-flow__content {
  flex: 1;
  padding-top: var(--space-2);
}

.pillar-flow__title {
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  color: var(--color-text);
  margin-bottom: var(--space-3);
}

.pillar-flow__text {
  max-width: none;
  font-size: var(--fs-md);
  color: var(--color-text-3);
  line-height: var(--lh-relaxed);
}

/* --- Large faint corner icon — same visual idea as Executive Coaching's
   .exec-mark / The 5 Ds' .d-panel__mark, reimplemented locally per the
   per-page-CSS convention so "Who This Is For" doesn't read as a flat
   block of bullets. --- */
.ceo-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;
}

/* --- Centered CTA closing out "Who This Is For", so the section ends on
   a next step instead of just the qualifying copy. --- */
.who-this-is-for__cta {
  text-align: center;
  margin-top: var(--space-10);
}

/* --- "The Problem" — .about-section__header's own margin-bottom
   (var(--space-16), 64px) is meant for the gap under a full section
   header; here it sits directly above the .services-list checklist and
   leaves a large empty gap between "And yet:" and the first bullet. --- */
#the-problem .split-panel__content .about-section__header {
  margin-bottom: var(--space-4);
}

/* --- Check-bullet list — global CSS resets <ul> to no markers, so the
   "Who This Is For" / "The Problem" qualifying-criteria lists need a real
   icon-bullet treatment instead of a flat unstyled block. Same component
   as services.css's .services-list, rebuilt locally per the per-page-CSS
   convention (that stylesheet isn't loaded here). --- */
.services-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  max-width: 820px;
  margin: 0 auto;
}

.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;
}

/* --- Quote block — this page's pull-quote treatment (used twice: the
   problem section and the 5 Ds section), same visual idea as
   the-5-ds.css's/executive-coaching.css's .quote-block, rebuilt locally
   per the per-page-CSS convention rather than shared across pages. --- */
.quote-block {
  position: relative;
  max-width: 760px;
  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) {
  .ceo-mark {
    font-size: 6rem;
  }

  #the-solution .drivers-list--stacked {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  /* Centered by design on tablet/desktop (see base rules above);
     left-aligned on phones only. */
  .ceo-hero__content,
  #the-5-ds .about-section__header p.ceo-5ds-lede,
  .who-this-is-for__cta,
  .quote-block blockquote {
    text-align: left;
  }

  .ceo-mark {
    font-size: 4.5rem;
  }

  .pillar-flow__item,
  .pillar-flow__item:not(:last-child) {
    padding-bottom: var(--space-8);
  }

  .pillar-flow__item:not(:last-child) .pillar-flow__marker::after {
    bottom: calc(var(--space-8) * -1);
  }

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