/* ============================================
   ABOUT PAGE — Deslop pass (CPDSWEB-048)
   Sections: dark centered hero, founder/story
   two-column split with quick facts, how-it-works
   numbered flow, principles rows, final CTA.
   Calm, practical, founder-led.
   ============================================ */

body.vb-about {
  padding-top: var(--header-height);
}

/* ============================================
   HERO — dark, centered, restrained
   ============================================ */

.about-hero {
  position: relative;
  background: var(--surface-dark);
  color: var(--colour-text-inverse);
  padding: var(--space-20) 0;
  overflow: hidden;
  border-bottom: 1px solid var(--header-border);
}

.about-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--atmosphere-cool);
  pointer-events: none;
  z-index: 0;
}

.about-hero > .vb-container {
  position: relative;
  z-index: 1;
}

.about-hero-inner {
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.about-hero-eyebrow {
  margin-bottom: var(--space-7);
}

.about-hero-title {
  font-size: clamp(40px, 5.2vw, 60px);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--letter-spacing-display);
  line-height: var(--line-height-display);
  color: var(--colour-text-inverse);
  margin: 0 0 var(--space-6);
  max-width: 20ch;
}

.about-hero-title em {
  font-style: normal;
  color: var(--colour-teal-light);
}

.about-hero-sub {
  font-size: var(--font-size-body-large);
  color: var(--colour-text-inverse-muted);
  line-height: var(--line-height-loose);
  font-weight: var(--font-weight-light);
  max-width: 580px;
  margin: 0 0 var(--space-8);
}

.about-hero-actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  justify-content: center;
}

.about-hero-meta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-6);
  font-size: var(--font-size-caption);
  color: var(--colour-text-inverse-faint);
  letter-spacing: 0.01em;
}

.about-hero-meta-dot {
  width: 6px;
  height: 6px;
  border-radius: var(--radius-circle);
  background: var(--colour-teal-light);
}

@media (max-width: 600px) {
  .about-hero { padding: var(--space-16) 0; }
  .about-hero-actions { width: 100%; }
  .about-hero-actions .vb-btn { flex: 1; }
}

/* ============================================
   STORY / FOUNDER — light, two-column split
   ============================================ */

.about-story {
  background: var(--surface-primary);
}

.about-story-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr);
  gap: var(--space-14);
  align-items: start;
}

.about-story-side {
  position: sticky;
  top: calc(var(--header-height) + var(--space-8));
}

.about-story-side .vb-eyebrow {
  display: inline-block;
  margin-bottom: var(--space-5);
}

/* Founder card — clean, no photo (monogram avatar) */
.about-founder-card {
  background: var(--surface-primary);
  border: 1px solid var(--colour-border);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  margin-bottom: var(--space-7);
  box-shadow: var(--shadow-card);
}

.about-founder-head {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
}

.about-founder-monogram {
  flex-shrink: 0;
  width: 52px;
  height: 52px;
  border-radius: var(--radius-lg);
  background: var(--surface-dark);
  color: var(--colour-teal-light);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.04em;
}

.about-founder-id {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.about-founder-id strong {
  font-size: var(--font-size-h4);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--letter-spacing-heading);
  color: var(--colour-text-primary);
  line-height: 1.2;
}

.about-founder-id span {
  font-size: var(--font-size-body-small);
  color: var(--colour-text-secondary);
}

.about-founder-points {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2) var(--space-4);
}

.about-founder-points li {
  position: relative;
  padding-left: var(--space-5);
  font-size: var(--font-size-body-small);
  color: var(--colour-text-primary);
  line-height: 1.4;
}

.about-founder-points li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 6px;
  height: 6px;
  border-radius: var(--radius-circle);
  background: var(--colour-teal-deep);
}

/* Strapline — elevate the CPDS approach line */
.about-story-body .about-strapline {
  margin-top: var(--space-7);
  padding-top: var(--space-6);
  border-top: 1px solid var(--colour-border);
  font-size: var(--font-size-h4);
  font-weight: var(--font-weight-semibold);
  color: var(--colour-text-primary);
  line-height: 1.3;
}

.about-facts {
  margin: 0;
  padding: 0 var(--space-6);
  background: var(--surface-secondary);
  border: 1px solid var(--colour-border);
  border-radius: var(--radius-xl);
}

.about-facts > div {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  gap: var(--space-4);
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--colour-border-soft);
  align-items: baseline;
}

.about-facts > div:last-child {
  border-bottom: 0;
}

.about-facts dt {
  font-size: var(--font-size-eyebrow);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--letter-spacing-eyebrow);
  text-transform: uppercase;
  color: var(--colour-text-tertiary);
  margin: 0;
}

.about-facts dd {
  font-size: var(--font-size-body-small);
  color: var(--colour-text-primary);
  line-height: var(--line-height-body);
  margin: 0;
}

.about-story-body .vb-eyebrow {
  display: inline-block;
  margin-bottom: var(--space-4);
}

.about-story-body h2 {
  font-size: var(--font-size-h2-section);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--letter-spacing-display);
  line-height: var(--line-height-heading);
  color: var(--colour-text-primary);
  margin: 0 0 var(--space-7);
  max-width: 22ch;
}

.about-story-body p {
  font-size: var(--font-size-body-large);
  color: var(--colour-text-secondary);
  line-height: var(--line-height-loose);
  font-weight: var(--font-weight-light);
  margin: 0 0 var(--space-5);
}

.about-story-body p:last-child {
  margin-bottom: 0;
}

.about-story-body p strong {
  color: var(--colour-text-primary);
  font-weight: var(--font-weight-semibold);
}

@media (max-width: 1024px) {
  .about-story-grid {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }
  .about-story-side {
    position: static;
  }
}

/* ============================================
   HOW CPDS WORKS — restrained numbered flow
   ============================================ */

.about-how {
  background: var(--surface-secondary);
}

.about-how .vb-section-header.align-left {
  text-align: left;
  margin: 0 0 var(--space-12);
  max-width: 720px;
}

.about-how .vb-section-header.align-left .vb-section-sub {
  max-width: 620px;
  margin: 0;
}

.about-flow {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-4);
}

.about-flow-stage {
  background: var(--surface-primary);
  border: 1px solid var(--colour-border);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.about-flow-step {
  font-size: var(--font-size-eyebrow);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--letter-spacing-eyebrow);
  text-transform: uppercase;
  color: var(--colour-teal-deep);
  margin-bottom: var(--space-2);
}

.about-flow-stage strong {
  font-size: var(--font-size-h4);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--letter-spacing-heading);
  line-height: 1.25;
  color: var(--colour-text-primary);
}

.about-flow-stage > span:not(.about-flow-step) {
  font-size: var(--font-size-body-small);
  color: var(--colour-text-secondary);
  line-height: var(--line-height-body);
}

@media (max-width: 1024px) {
  .about-flow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 600px) {
  .about-flow { grid-template-columns: 1fr; }
}

/* ============================================
   PRINCIPLES — horizontal rows (not card grid)
   ============================================ */

.about-principles {
  background: var(--surface-primary);
}

.about-principles .vb-section-header.align-left {
  text-align: left;
  margin: 0 0 var(--space-10);
  max-width: 720px;
}

.about-principles .vb-section-header.align-left .vb-section-sub {
  max-width: 620px;
  margin: 0;
}

.about-principles-list {
  display: flex;
  flex-direction: column;
}

.about-principle-row {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: var(--space-10);
  padding: var(--space-8) 0;
  border-top: 1px solid var(--colour-border);
  align-items: start;
}

.about-principle-row:last-child {
  border-bottom: 1px solid var(--colour-border);
}

.about-principle-label {
  font-size: var(--font-size-eyebrow);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--letter-spacing-eyebrow);
  text-transform: uppercase;
  color: var(--colour-text-tertiary);
  padding-top: 6px;
}

.about-principle-body h3 {
  font-size: var(--font-size-h3);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--letter-spacing-heading);
  line-height: 1.2;
  color: var(--colour-text-primary);
  margin: 0 0 var(--space-3);
  max-width: 22ch;
}

.about-principle-body p {
  font-size: var(--font-size-body-large);
  color: var(--colour-text-secondary);
  line-height: var(--line-height-loose);
  font-weight: var(--font-weight-light);
  max-width: 60ch;
  margin: 0;
}

@media (max-width: 768px) {
  .about-principle-row {
    grid-template-columns: 1fr;
    gap: var(--space-3);
    padding: var(--space-7) 0;
  }
  .about-principle-label {
    padding-top: 0;
  }
  .about-principle-body h3 {
    font-size: var(--font-size-h4);
  }
  .about-principle-body p {
    font-size: var(--font-size-body-small);
  }
}