/* ==========================================================================
   SPEARPOINT ADVISORS — For Founders 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.
   ========================================================================== */

/* --- "Founder Coaching & Advisory Services" — this header has two
   paragraphs instead of the single one .section-header--split's own CSS
   assumes (that rule's `p { margin: 0 }` was written for exactly one),
   so without this the second paragraph would sit flush against the
   first with no gap. Wrapping div matches the pattern index.html's
   risk-section__header already uses for a multi-paragraph split header. --- */
.founder-coaching-services__lede p:first-child {
  margin-bottom: var(--space-4);
}

/* --- 6 points as a row of white cards (not the orange-tinted .value-card
   variant), 3 per row, icon-over-title-over-text instead of the shared
   .drivers-list's icon-left row layout — same treatment as for-ceos.css's
   #the-solution cards. --- */
.founder-coaching-services__grid {
  grid-template-columns: repeat(3, 1fr);
  max-width: none;
  margin-left: 0;
  margin-right: 0;
  gap: var(--space-6);
  align-items: stretch;
}

.founder-coaching-services__grid .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);
}

.founder-coaching-services__grid .drivers-list__number {
  margin-bottom: var(--space-4);
}

.founder-coaching-services__grid .drivers-list__item:hover {
  border-color: var(--color-orange);
  transform: translateY(-3px);
}

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

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

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

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

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

/* --- Founder 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. --- */
#founder-coaching-services .drivers-list {
  max-width: none;
  margin-left: 0;
  margin-right: 0;
}

/* --- This Is for You — left-aligned instead of style.css's centered
   .about-section__header default, to read as a direct, personal narrative
   rather than a centered marketing headline. --- */
#this-is-for-you .about-section__header {
  text-align: left;
  margin-left: 0;
  margin-right: 0;
}

/* The "What You Want vs. What You Need" lead-in stays centered, unlike
   the rest of this section's left-aligned headers above. The shared
   #this-is-for-you rule above zeroes out left/right margin (for the
   left-aligned headers, which need max-width: none to run full width) —
   restore auto centering here so the box itself sits on the same center
   axis as the .reality-check grid below it, not just its own text. */
#this-is-for-you .about-section__header.reality-check__heading {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

/* style.css's .about-section__header p carries no margin of its own (only
   the h2 above it does) — the closing paragraph after the quote-block
   needs room below the quote and, since it's alone in its own header div
   here, no bottom margin to trim against the button that follows. */
#this-is-for-you .about-section__header p {
  margin-top: var(--space-6);
}

/* --- Reality table — "What You Want" vs. "What You Need" as a real
   <table>, not a div grid pretending to be one: a header row names each
   column, then the "On paper" / "in reality" contrast reads down each
   column. Divider-separated, no card chrome, same idiom as style.css's
   .risk-stats / about.css's .philosophy-grid elsewhere on the site. --- */
.reality-table {
  width: 100%;
  border-collapse: collapse;
  margin: var(--space-8) 0 var(--space-10);
}

.reality-table th {
  text-align: left;
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  color: var(--color-text);
  padding-bottom: var(--space-5);
  border-bottom: 1px solid var(--color-border);
}

.reality-table td {
  vertical-align: top;
  padding-top: var(--space-6);
  font-size: var(--fs-md);
  color: var(--color-text-2);
  line-height: var(--lh-relaxed);
}

.reality-table th + th,
.reality-table td + td {
  border-left: 1px solid var(--color-border);
  padding-left: var(--space-6);
}

.reality-table th:first-child,
.reality-table td:first-child {
  padding-right: var(--space-6);
}

.reality-table td p {
  margin: 0;
  max-width: none;
}

/* "What You Want vs. What You Need" lead-in line, sitting above each
   column's On Paper / In Reality label — heavier weight and darker color
   than the body paragraph below it, so it reads as its own beat rather
   than blending into the label + paragraph underneath. */
.reality-table__intro {
  font-weight: var(--fw-semibold);
  color: var(--color-text);
}

.reality-table__label {
  display: block;
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--ls-wider);
  color: var(--color-orange);
  margin-top: var(--space-5);
  margin-bottom: var(--space-3);
}

/* --- Quote block — this page's pull-quote treatment (used twice: the
   ceiling 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) {
  .founder-coaching-services__grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 768px) {
  /* Centered by design on tablet/desktop (see base rules above);
     left-aligned on phones only. */
  .founder-hero__content,
  #this-is-for-you .about-section__header.reality-check__heading,
  .quote-block blockquote {
    text-align: left;
  }

  .founder-coaching-services__grid {
    grid-template-columns: 1fr;
  }

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

  /* Table can't reflow into a single column on its own — force every
     table element to behave like a block so the two columns stack instead
     of squeezing side by side. Reads header/header, then row by row
     (left cell, right cell), rather than grouping each side's full
     column together — a reasonable trade-off for a real <table>
     without duplicating every cell's label via JS/data-attrs. */
  .reality-table,
  .reality-table thead,
  .reality-table tbody,
  .reality-table tr,
  .reality-table th,
  .reality-table td {
    display: block;
    width: 100%;
  }

  .reality-table th + th,
  .reality-table td + td {
    border-left: none;
    padding-left: 0;
  }

  .reality-table th {
    padding-top: var(--space-3);
    padding-bottom: var(--space-3);
    border-bottom: none;
    border-top: 1px solid var(--color-border);
  }

  .reality-table thead tr th:first-child {
    padding-top: 0;
    border-top: none;
  }

  .reality-table td {
    padding-top: var(--space-6);
    border-top: 1px solid var(--color-border);
  }
}