/* ============================================================
   VIGOR GROUP — About page styles
   Page-specific layout only. Shared tokens/components live in
   tokens.css, base.css, components.css, layout.css.
   ============================================================ */

/* ---------- Shared prose blocks (Who we are, Foundation) ---------- */
.prose { max-width: 74ch; }
.prose p { color: var(--slate); }
.prose p + p { margin-top: var(--s-5); }
.container--narrow .prose { max-width: none; }

/* ---------- 1. Who we are — stats ---------- */
.about-stats {
  grid-template-columns: repeat(4, 1fr);
  margin-top: clamp(40px, 5vw, 72px);
  padding-top: clamp(32px, 4vw, 48px);
  border-top: 1px solid var(--line);
}
@media (max-width: 720px) { .about-stats { grid-template-columns: 1fr 1fr; } }

/* ---------- 2. Scale and reach — two-column ---------- */
.about-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 5vw, 80px);
  align-items: center;
}
.about-split__text .lead { margin-top: var(--s-5); }

.check-list { display: grid; gap: var(--s-5); }
.check-list li {
  display: flex; gap: var(--s-4); align-items: flex-start;
  font-size: var(--fs-lead); line-height: 1.5; color: var(--slate);
}
.check-list .ck {
  flex: none; width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center; margin-top: 2px;
  background: var(--grad-brand); color: #fff; box-shadow: var(--sh-brand);
}
.check-list .ck svg { width: 17px; height: 17px; }
@media (max-width: 820px) { .about-split { grid-template-columns: 1fr; } }

/* ---------- 3. Leadership & philosophy — founder ---------- */
.founder-grid {
  display: grid;
  grid-template-columns: .82fr 1.18fr;
  gap: clamp(40px, 5vw, 80px);
  align-items: center;
}
.founder-figure { position: relative; margin: 0; }
.founder-figure img {
  width: 100%; border-radius: var(--r-lg); box-shadow: var(--sh-lg);
  aspect-ratio: 4 / 5; object-fit: cover; object-position: top center;
  background: var(--bg-alt);
}
.founder-caption {
  position: absolute; left: var(--s-4); right: var(--s-4); bottom: var(--s-4);
  display: flex; flex-direction: column; gap: 4px;
  padding: var(--s-4) var(--s-5);
  background: rgba(255,255,255,.92);
  backdrop-filter: saturate(180%) blur(8px);
  border-radius: var(--r); box-shadow: var(--sh);
}
.founder-name { font-family: var(--font-display); font-weight: 600; font-size: 1.2rem; color: var(--navy-900); line-height: 1.1; }
.founder-role { font-size: .85rem; color: var(--muted); }
.founder-text .lead { margin-top: var(--s-5); }
.founder-text p + p { margin-top: var(--s-4); color: var(--slate); }
@media (max-width: 860px) {
  .founder-grid { grid-template-columns: 1fr; }
  .founder-figure { order: -1; max-width: 440px; margin-inline: auto; }
}

/* ---------- 4. Reputation — 3 cards + closing ---------- */
.cards-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(18px, 2vw, 28px); }
.closing-line {
  max-width: 64ch; margin: clamp(40px, 4vw, 56px) auto 0;
  text-align: center; color: var(--slate);
}
@media (max-width: 860px) { .cards-3 { grid-template-columns: 1fr; max-width: 560px; margin-inline: auto; } }

/* ---------- 5. Vision, Mission & Core Values ---------- */
.vm-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(18px, 2vw, 28px); }
.vm-card {
  border-color: transparent;
  background:
    linear-gradient(#fff, #fff) padding-box,
    var(--grad-brand) border-box;
  border: 1.5px solid transparent;
}
.vm-card__label {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: var(--fs-eyebrow); font-weight: 700;
  letter-spacing: var(--tracking-eyebrow); text-transform: uppercase;
  color: var(--gold-700);
}
.vm-card__label::before { content: ""; width: 28px; height: 2px; background: var(--red-500); }
.vm-card__text {
  margin-top: var(--s-4);
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(1.25rem, 1.05rem + .8vw, 1.7rem); line-height: 1.35;
  letter-spacing: -.01em; color: var(--ink);
}
@media (max-width: 760px) { .vm-grid { grid-template-columns: 1fr; } }

.values-title {
  font-family: var(--font-display); font-weight: 500;
  font-size: var(--fs-h3); text-align: center; letter-spacing: var(--tracking-display);
  margin-top: clamp(56px, 6vw, 88px); margin-bottom: clamp(32px, 3.5vw, 48px);
}
/* Editorial 2×2 grid of core values: index · icon · name+desc on one row each */
.values-index {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 0;
  border-top: 1px solid var(--line-2);
  max-width: 980px; margin-inline: auto;
}
.value-row {
  display: grid; grid-template-columns: auto auto 1fr; align-items: center;
  gap: clamp(16px, 2vw, 26px);
  padding: clamp(22px, 2.6vw, 32px) clamp(8px, 1.5vw, 22px);
  border-bottom: 1px solid var(--line-2);
  transition: background var(--dur-2) var(--ease);
}
.value-row:hover { background: rgba(194,162,94,.06); }
/* hairline between the two columns on wide screens */
@media (min-width: 681px) {
  .value-row:nth-child(odd) { border-right: 1px solid var(--line-2); padding-right: clamp(22px, 2.5vw, 36px); }
  .value-row:nth-child(even) { padding-left: clamp(22px, 2.5vw, 36px); }
}
.value-row__ix {
  font-family: var(--font-display); font-style: italic; color: var(--red-500);
  font-size: clamp(1.4rem, 1.1rem + 1vw, 2rem); line-height: 1; min-width: 1.4em;
}
.value-row .icon-badge { margin: 0; width: 50px; height: 50px; flex: none; }
.value-row__body { display: flex; flex-direction: column; gap: 3px; }
.value-row__name { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-h6); color: var(--ink); line-height: 1.1; }
.value-row__desc { color: var(--muted); font-size: .96rem; line-height: 1.45; }
@media (max-width: 680px) {
  .values-index { grid-template-columns: 1fr; }
}

/* ---------- 6. Social impact (dark) ---------- */
.csr-head { max-width: 820px; margin-bottom: clamp(40px, 4vw, 64px); }
.csr-head .csr-quote { margin-top: var(--s-4); }
.csr-head .quote__mark { font-size: 1.1em; line-height: 0; }
.csr-head .lead { margin-top: var(--s-5); max-width: 64ch; }

.csr-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 1.8vw, 24px); }
.csr-card h3 { color: #fff; }
.csr-card p { color: rgba(255,255,255,.78); }
.csr-card .icon-badge {
  background: rgba(255,255,255,.1); color: #fff;
  box-shadow: none; border: 1px solid rgba(255,255,255,.16);
}
@media (max-width: 880px) { .csr-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .csr-grid { grid-template-columns: 1fr; } }

/* ---------- 8. CTA band (page-specific; mirrors home pattern) ---------- */
.cta-band {
  position: relative; border-radius: var(--r-2xl); overflow: hidden; isolation: isolate;
  background: var(--grad-brand); color: #fff;
  padding: clamp(48px, 6vw, 88px) clamp(28px, 5vw, 80px);
  text-align: center;
}
.cta-band::before {
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: .16;
  background: url("../../img/waves-top.svg") top center/cover no-repeat;
}
.cta-band h2 { font-size: var(--fs-h2); max-width: 18ch; margin-inline: auto; }
.cta-band .lead { color: rgba(255,255,255,.85); max-width: 56ch; margin: var(--s-4) auto 0; }
.cta-band .btn-row { margin-top: var(--s-6); }