/* ============================================================
   About page
   ── 1. Story (3-up: quote · photo · prose)
   ── 2. Values (editorial numbered panels)
   ── 3. Team band (dark, 3-pillar layout)
   ── 4. CTA spacing
   ============================================================ */

/* ── 1. Story ──────────────────────────────────────────── */
.about-story__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  grid-template-rows: auto auto;
  column-gap: clamp(var(--space-lg), 5vw, var(--space-2xl));
  row-gap: var(--space-lg);
  align-items: start;
}
.about-story__quote {
  grid-column: 1;
  grid-row: 1;
  align-self: start;
  /* Note: previously position: sticky. Removed because at 900–1023px
     the prose column would slide up and visually underlap the pinned
     quote (sticky elements share a column with the row-2 prose). */
}
.about-story__quote .type-label {
  display: block;
  margin-bottom: var(--space-md);
  color: var(--color-text-muted);
}
.about-story__quote .pull-quote {
  font-size: clamp(28px, 3.6vw, 44px);
  line-height: 1.15;
  color: var(--color-text-primary);
  max-width: 22ch;
}
.about-story__quote .pull-quote span {
  display: block;
  margin-top: var(--space-md);
  font-size: 0.7em;
  color: var(--color-text-body);
}
.about-story__visual {
  grid-column: 2;
  grid-row: 1 / span 2;
  margin: 0;
  align-self: stretch;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  width: 100%;
  background: var(--color-rule);
}
.about-story__visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(100%);
  display: block;
}
.about-story__prose {
  grid-column: 1;
  grid-row: 2;
}
.about-story__p {
  margin-bottom: var(--space-md);
}
.about-story__p:last-child {
  margin-bottom: 0;
}

/* ── 2. Values (editorial numbered panels) ───────────── */
.values-section__grid {
  display: grid;
  grid-template-columns: minmax(220px, 0.85fr) minmax(0, 1.15fr);
  column-gap: clamp(var(--space-lg), 5vw, var(--space-2xl));
  align-items: start;
}
.values-section__intro {
  position: sticky;
  top: calc(60px + env(safe-area-inset-top, 0px) + 24px);
}
.values-section__intro .type-label {
  display: block;
  margin-bottom: var(--space-md);
  color: var(--color-text-muted);
}
.values-section__heading {
  font-family: var(--font-serif);
  font-size: var(--text-3xl);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-h2);
  color: var(--color-text-primary);
  max-width: 14ch;
  margin-bottom: var(--space-md);
}
.values-section__heading em {
  font-style: italic;
  color: var(--color-text-body);
}
.values-section__lead {
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--color-text-body);
  max-width: 32ch;
}

.values-section__panels {
  display: flex;
  flex-direction: column;
}
.value-panel {
  padding-block: var(--space-lg);
  border-top: 1px solid var(--color-rule);
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: var(--space-md);
}
.value-panel:last-child {
  border-bottom: 1px solid var(--color-rule);
}
.value-panel__num {
  font-family: var(--font-serif);
  font-size: var(--text-2xl);
  font-style: italic;
  color: var(--color-orange);
  line-height: 1;
}
.value-panel__title {
  font-family: var(--font-serif);
  font-size: var(--text-xl);
  margin-bottom: var(--space-sm);
  letter-spacing: var(--tracking-h3);
  color: var(--color-text-primary);
}
.value-panel__body {
  font-size: var(--text-base);
  color: var(--color-text-body);
  line-height: var(--leading-relaxed);
  max-width: 52ch;
}

/* Legacy values-grid kept for backward compatibility but no longer rendered */
.values-grid { display: none; }

/* ── 3. Team band (dark) ──────────────────────────────── */
.team-band {
  background: var(--color-dark);
  padding-block: var(--space-2xl);
  border-top: 1px solid var(--color-rule-dark);
}
.team-band__inner {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  column-gap: clamp(var(--space-lg), 5vw, var(--space-2xl));
  align-items: start;
}
.team-band__intro .type-label {
  color: var(--color-text-muted-inverse);
  display: block;
  margin-bottom: var(--space-md);
}
.team-band__heading {
  font-family: var(--font-serif);
  font-size: var(--text-3xl);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-h2);
  color: var(--color-text-inverse);
  margin-bottom: var(--space-md);
  max-width: 14ch;
}
.team-band__heading em {
  font-style: italic;
  color: var(--color-text-muted-inverse);
}
.team-band__lead {
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--color-text-muted-inverse);
  max-width: 38ch;
  margin-bottom: var(--space-lg);
}

.team-band__pillars {
  display: flex;
  flex-direction: column;
}
.team-pillar {
  padding-block: var(--space-lg);
  border-top: 1px solid var(--color-rule-dark);
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: var(--space-md);
}
.team-pillar:last-child {
  border-bottom: 1px solid var(--color-rule-dark);
}
.team-pillar__num {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--text-2xl);
  line-height: 1;
  color: var(--color-orange);
}
.team-pillar__title {
  font-family: var(--font-serif);
  font-size: var(--text-xl);
  margin-bottom: var(--space-sm);
  color: var(--color-text-inverse);
}
.team-pillar__body {
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--color-text-muted-inverse);
  max-width: 48ch;
}

/* ── 4. CTA edge ──────────────────────────────────────── */
.cta-band--bordered {
  border-top: 1px solid var(--color-rule-dark);
}

/* ── Responsive ───────────────────────────────────────── */
/* Single breakpoint for the whole page going to single-column.
   Previously about-story collapsed at 900px while values/team
   collapsed at 1024px, which left the story in a broken 2-col state
   in that range. */
@media (max-width: 1024px) {
  .about-story__grid,
  .values-section__grid,
  .team-band__inner {
    grid-template-columns: 1fr;
    row-gap: var(--space-lg);
  }
  .about-story__quote,
  .about-story__visual,
  .about-story__prose {
    grid-column: 1;
  }
  .about-story__quote   { grid-row: 1; }
  .about-story__visual  { grid-row: 2; aspect-ratio: 16 / 11; }
  .about-story__prose   { grid-row: 3; }
  .about-story__quote .pull-quote { max-width: none; }

  .values-section__intro { position: static; }
  .values-section__heading,
  .values-section__lead,
  .team-band__heading,
  .team-band__lead { max-width: none; }
}

/* ── True mobile ─────────────────────────────────────── */
@media (max-width: 768px) {
  /* Collapse panel grids to a single column so the section heading
     and panel titles share the same left edge. The numeral becomes
     a small italic editorial prefix above the title rather than a
     sidebar column that pushes content right. */
  .value-panel,
  .team-pillar {
    display: block;
    padding-block: var(--space-md);
  }
  .value-panel__num,
  .team-pillar__num {
    display: block;
    font-size: var(--text-base);
    margin-bottom: var(--space-xs);
  }
  .value-panel__title,
  .team-pillar__title {
    font-size: var(--text-lg);
  }
  .value-panel__body,
  .team-pillar__body {
    font-size: var(--text-sm);
  }

  .team-band {
    padding-block: var(--space-xl);
  }

  /* Pull-quote tightens on phone widths */
  .about-story__quote .pull-quote {
    font-size: clamp(24px, 6vw, 32px);
  }
  .about-story__visual {
    aspect-ratio: 4 / 3;
  }
}