/* ==========================================================================
   SPEARPOINT ADVISORS — Executive Coaching 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, .risk-stats/.risk-stats__item,
   .drivers-list/.drivers-list__item/.drivers-list__number/.drivers-list__label/
   .drivers-list__text, .process-grid/.process-step (base 3-col layout —
   see the 5-step override below, also now used for "Who This Executive
   Coaching Is Built For"), .founder-section__grid/__image-wrap/
   __image/__content, .credentials/.credential-tag, .testimonials-section/
   .testimonials-slider/.testimonial-card, .section-decor, .cta-section,
   .btn.
   ========================================================================== */

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

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

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

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

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

/* --- Executive Coaching page stat cards styling --- */
.exec-coaching-stats {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  max-width: none;
  margin: var(--space-6) 0;
}

.exec-coaching-stats .stat-card__description {
  font-size: var(--fs-sm);
  line-height: var(--lh-relaxed);
}

.exec-coaching-stats .stat-card--light {
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
}

/* --- Minimal stat style: no card chrome, centered text, thin divider
   between columns (matches reference screenshot) --- */
.exec-coaching-stats--minimal {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2) var(--space-8);
}

.exec-coaching-stats--minimal .stat-card {
  background: none;
  border: none;
  border-radius: 0;
  box-shadow: none;
  padding: 0 0 0 var(--space-8);
  text-align: center;
  border-left: 1px solid var(--color-border);
}

.exec-coaching-stats--minimal .stat-card::after {
  display: none;
}

.exec-coaching-stats--minimal .stat-card:first-child {
  border-left: none;
  padding-left: 0;
}

.exec-coaching-stats--minimal .stat-card__value {
  color: var(--color-orange);
  font-size: var(--fs-3xl);
}

.exec-coaching-stats--minimal .stat-card__description {
  color: var(--color-text-2);
}

@media (max-width: 640px) {
  .exec-coaching-stats--minimal {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }

  .exec-coaching-stats--minimal .stat-card {
    border-left: none;
    padding-left: 0;
    border-top: 1px solid var(--color-border);
    padding-top: var(--space-6);
  }

  .exec-coaching-stats--minimal .stat-card:first-child {
    border-top: none;
    padding-top: 0;
  }
}

/* --- Large faint corner icon — same visual idea as Services'/The 5 Ds'
   own corner-mark component (.services-mark / .d-panel__mark), reimplemented
   locally per the per-page-CSS convention so a text-heavy section (Who
   This Is Built For) doesn't read as a flat block. --- */
.exec-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;
}

/* --- Quote block — this page's pull-quote treatment, same visual idea as
   the-5-ds.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;
}

/* --- Five-step process — style.css's .process-grid is built for the
   homepage's 3-gate Discover/Prepare/Decide layout. This page's coaching
   process has 5 steps, so the column count is overridden here while still
   falling through to style.css's existing 768px single-column rule
   untouched (that media query targets .process-grid directly, so it wins
   regardless of this modifier's specificity at that breakpoint). --- */
.process-grid--five {
  grid-template-columns: repeat(5, 1fr);
}

/* "Who This Executive Coaching Is Built For" reuses .process-grid--five
   too, but its qualifying-criteria text reads better centered than the
   "how-it-works" process steps' left-aligned paragraphs — scoped to
   this section only so that one is untouched. */
#who-this-is-for .process-step__text {
  text-align: center;
}

/* --- Inline arrow link — each cross-sell item's own link in "Executive
   Coaching Works Best Alongside." .drivers-list doesn't carry a link slot
   in style.css since its other uses (site-wide "what we offer" lists)
   don't need one — this page's cross-sell version does. --- */
.drivers-list__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  margin-top: var(--space-2);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--color-orange);
  transition: gap var(--transition-fast);
}

.drivers-list__link:hover {
  gap: var(--space-2);
}

/* --- Next-step link cards — the "Learn about our Exit Planning services /
   See the Discover–Prepare–Decide process" pair. Deliberately not .btn:
   that component is built for short 2–4 word CTA labels (uppercase, wide
   letter-spacing) and jamming a full sentence into that shape reads badly.
   This is a bordered, clickable row instead — sentence case, an icon for
   quick scanning, and the same arrow-slide-on-hover motion .btn uses. --- */
.exec-next-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-top: var(--space-8);
}

.exec-next-links__item {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex: 1 1 300px;
  padding: var(--space-5) var(--space-6);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  transition: border-color var(--transition-base),
              background-color var(--transition-base),
              transform var(--transition-base);
}

.exec-next-links__item:hover {
  border-color: var(--color-orange);
  background-color: rgba(232, 83, 14, 0.04);
  transform: translateY(-2px);
}

.exec-next-links__icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
  background: rgba(232, 83, 14, 0.1);
  color: var(--color-orange);
  font-size: var(--fs-md);
}

.exec-next-links__text {
  flex: 1;
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--color-text);
  line-height: var(--lh-relaxed);
}

.exec-next-links__arrow {
  flex-shrink: 0;
  color: var(--color-orange);
}

/* --- Exit Strategy Section Split Grid --- */
.exit-strategy-grid {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: var(--space-16);
  align-items: center;
}

.exit-strategy-grid__left {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.exit-strategy-grid__right {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  font-size: var(--fs-md);
  color: var(--color-text-2);
  line-height: var(--lh-relaxed);
}

.exit-strategy-grid__right p {
  margin: 0;
  max-width: none;
}

.exit-strategy-grid__heading {
  margin: 0;
}

@media (max-width: 1024px) {
  .exit-strategy-grid {
    grid-template-columns: 1fr;
    gap: var(--space-10);
  }
}


/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1200px) {
  .process-grid--five {
    grid-template-columns: repeat(3, 1fr);
    row-gap: var(--space-12);
  }

  .process-grid--five .process-grid__progress {
    display: none;
  }
}

@media (max-width: 768px) {
  /* Centered by design on tablet/desktop (see base rules above);
     left-aligned on phones only. */
  .exec-hero__content,
  .exec-coaching-stats--minimal .stat-card,
  .quote-block blockquote,
  #who-this-is-for .process-step__text {
    text-align: left;
  }

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

  /* Match style.css's own .process-grid 768px rule (single-column stack) —
     needed here too since .process-grid--five otherwise outranks it on
     specificity (two classes vs. one). */
  .process-grid--five {
    grid-template-columns: 1fr;
  }
}