/* ==========================================================================
   why-borrowed-bi.html-only rules. Everything else (header, footer, buttons,
   cards, hero shell, CTA, back-to-top, global typography, dark-mode colors)
   comes from css/*.css and must not be redefined here.
   Requires the full shared foundation to be loaded first.
   ========================================================================== */

/* ---- hero: page-scoped headline size ----
   The shared h1 scale (base.css/hero.css, clamp 2.75-5.7rem) is tuned for
   shorter headlines (documented in hero.css). This page's headline is a
   57-character full sentence - longer than the homepage's, which already
   needed its own smaller override for the same reason - so it gets one
   too rather than wrapping to 5 stacked lines at desktop widths. */

.hero h1 {
  font-size: clamp(1.9rem, 3.6vw, 3.6rem);
  line-height: 1.12;
}

/* ---- hero summary card (page-specific illustration layout) ----
   Shell/media/copy/pills all come from the shared .hero-card--illustration
   family (hero.css), mirroring home.css's equivalent homepage component.
   Only the title/copy max-widths are genuinely page-specific (tuned per
   headline), so they're the only rules left. */

.why-hero-card .hero-card__title {
  max-width: 26ch;
}

.why-hero-card .hero-card__copy {
  max-width: 34ch;
}

/* ---- "experience behind the work": intro copy + credibility cards ---- */

.why-experience-intro {
  max-width: 700px;
  margin: 0 auto 40px;
  display: grid;
  gap: 18px;
}

.why-experience-intro p {
  color: var(--text-secondary);
  font-size: 1rem;
  line-height: 1.6;
}

.why-credibility-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

@media (max-width: 640px) {
  .why-credibility-grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }
}

/* ---- "how the work is approached": four-step process panel ----
   Same pattern approved on bi-consulting-services.html's "How scoping and
   pricing work" section, adapted here under this page's own class names
   (CSS files are page-scoped, not shared, so the rules are duplicated
   rather than imported). One bordered panel, four equal steps read left
   to right, thin vertical dividers, plain 01-04 markers - deliberately
   distinct from the icon-card grid above it. */

.why-process-panel {
  border: 1px solid var(--border-color);
  border-radius: var(--radius-panel);
  background: var(--surface-bg);
  box-shadow: var(--shadow-card);
}

.why-process-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  list-style: none;
  margin: 0;
  padding: 0;
}

.why-process-step {
  position: relative;
  padding: 24px;
}

.why-process-step:nth-child(n+2)::before {
  content: "";
  position: absolute;
  left: 0;
  top: 24px;
  bottom: 24px;
  width: 1px;
  background: var(--border-color);
}

.why-process-number {
  position: relative;
  margin-bottom: 14px;
  padding-bottom: 10px;
  color: var(--accent-label-color);
  font-size: var(--fs-label-sm);
  font-weight: 700;
  letter-spacing: 0.08em;
}

.why-process-number::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 18px;
  height: 2px;
  border-radius: 999px;
  background: var(--accent-color);
}

.why-process-title {
  margin: 0 0 8px;
  color: var(--heading-color);
  font-weight: 700;
  font-size: 1.02rem;
  line-height: 1.3;
}

.why-process-text {
  margin: 0;
  color: var(--text-secondary);
  font-size: var(--fs-secondary);
  line-height: 1.55;
}

@media (max-width: 900px) {
  .why-process-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .why-process-step:nth-child(3)::before {
    content: none;
  }

  .why-process-step:nth-child(-n+2)::after {
    content: "";
    position: absolute;
    left: 24px;
    right: 24px;
    bottom: 0;
    height: 1px;
    background: var(--border-color);
  }
}

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

  .why-process-step {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 12px;
    align-items: baseline;
    padding: 18px 22px;
  }

  .why-process-step:nth-child(n+2)::before {
    content: none;
  }

  .why-process-step:nth-child(-n+2)::after {
    content: none;
  }

  .why-process-step + .why-process-step::after {
    content: "";
    position: absolute;
    left: 22px;
    right: 22px;
    top: 0;
    height: 1px;
    background: var(--border-color);
  }

  .why-process-number {
    grid-column: 1;
    grid-row: 1;
    margin-bottom: 0;
    padding-bottom: 0;
  }

  .why-process-number::after {
    display: none;
  }

  .why-process-title {
    grid-column: 2;
    grid-row: 1;
    margin: 0;
  }

  .why-process-text {
    grid-column: 1 / -1;
    grid-row: 2;
    margin-top: 8px;
  }
}

/* ---- "data access and ownership": asymmetric trust section ----
   Left column reuses the shared .section-heading.align-left utility
   (layout.css) - defined sitewide but previously unused, so no shared CSS
   changes were needed. Right column is one bordered panel (same shell as
   the process panel above) holding four stacked rows with dividers.
   Deliberately not a card grid, icon set, or numbered-circle pattern -
   distinct from every other component on this page. */

.why-trust-layout {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 3.5fr);
  gap: 48px;
  align-items: start;
}

.why-trust-intro {
  margin-bottom: 0;
}

.why-trust-panel {
  border: 1px solid var(--border-color);
  border-radius: var(--radius-panel);
  background: var(--surface-bg);
  box-shadow: var(--shadow-card);
}

.why-trust-rows {
  list-style: none;
  margin: 0;
  padding: 0;
}

.why-trust-row {
  position: relative;
  padding: 22px 32px;
}

.why-trust-row + .why-trust-row::before {
  content: "";
  position: absolute;
  top: 0;
  left: 32px;
  right: 32px;
  height: 1px;
  background: var(--border-color);
}

.why-trust-title {
  position: relative;
  margin: 0 0 8px;
  padding-top: 14px;
  color: var(--heading-color);
  font-weight: 700;
  font-size: 1.02rem;
  line-height: 1.3;
}

.why-trust-title::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 18px;
  height: 2px;
  border-radius: 999px;
  background: var(--accent-color);
}

.why-trust-text {
  margin: 0;
  color: var(--text-secondary);
  font-size: var(--fs-secondary);
  line-height: 1.55;
}

@media (max-width: 900px) {
  .why-trust-layout {
    grid-template-columns: 1fr;
    gap: 28px;
  }
}

@media (max-width: 640px) {
  .why-trust-row {
    padding: 18px 24px;
  }

  .why-trust-row + .why-trust-row::before {
    left: 24px;
    right: 24px;
  }
}

/* ---- "where to start": compact service boxes (no icons) ----
   Deliberately lighter/smaller than .why-credibility-grid above - reduced
   padding, no icon bubble, no "may include" list. */

.why-start-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

.why-start-box {
  padding: 22px 24px;
}

.why-start-box h3 {
  margin: 0 0 8px;
  font-size: 1.1rem;
  line-height: 1.25;
}

.why-start-box p {
  margin: 0 0 14px;
  color: var(--text-secondary);
  font-size: var(--fs-secondary);
  line-height: 1.55;
}

.why-service-guide-link {
  margin-top: 24px;
  text-align: center;
}

@media (max-width: 640px) {
  .why-start-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }
}