/* 8 Furlong Consulting — core-values.css (about-us-core-values.html only) */

.cv-center { text-align: center; max-width: 860px; margin: 0 auto; }
.cv-center .lede, .cv-center p { margin: 22px auto 0; max-width: 680px; }

/* ---- The six values (John, 2026-09-10) --------------------------------
   Six core values are a set, not a narrative: the reader takes them in
   together. They used to run as six full-bleed sections down a 760px
   centred column, which turned 460 words into roughly six screens of
   scrolling with nothing but the alternating background to separate one
   from the next. One section, six cards, whole set in view. No numbering:
   the values are unranked, and 01–06 would imply an order that isn't there. */
.cv-grid { display: grid; grid-template-columns: 1fr; gap: 20px; align-items: stretch; }

.cv-card {
  background: var(--white);
  border: 1px solid var(--line-card);
  border-radius: var(--radius-card);
  padding: 30px 28px 32px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease);
}
.cv-card h2 { font-size: 24px; line-height: 1.18; }

/* One short saddle rule under each value name — the only ornament on the card. */
.cv-card__rule { width: 34px; height: 2px; margin-top: -6px; flex: none; background: var(--saddle); border-radius: 2px; }

.cv-quote { font-family: var(--font-display); font-weight: 500; font-size: 17px; line-height: 1.62; color: var(--navy); margin: 0; }

/* margin-top:auto pins the payoff line to the card floor. Cards in a row are
   equal height either way, so the slack has to sit somewhere: putting it above
   the payoff keeps that line — the operative one — on a common baseline the eye
   can scan across, instead of leaving ragged whitespace under six cards. */
.cv-real { font-size: 15px; line-height: 1.68; margin: auto 0 0; padding-top: 16px; border-top: 1px solid var(--line-light); }
.cv-real b { color: var(--navy); font-weight: 600; }

.cv-closer .btn { margin-top: 32px; }

@media (hover: hover) {
  .cv-card:hover { transform: translateY(-2px); border-color: var(--tan); box-shadow: 0 10px 26px rgba(29, 35, 39, .09); }
}

@media (prefers-reduced-motion: reduce) {
  .cv-card { transition: none; }
  .cv-card:hover { transform: none; }
}

@media (min-width: 768px) {
  .cv-grid { grid-template-columns: repeat(2, 1fr); gap: 22px; }
}

@media (min-width: 1024px) {
  .cv-grid { grid-template-columns: repeat(3, 1fr); gap: 24px; }
  .cv-card h2 { font-size: 25px; }
}