@layer components {
  .about-hero {
    width: 100%;
    max-width: var(--max-width);
    margin: 0 auto;
    padding: var(--spacing-3xl) var(--spacing-lg) var(--spacing-xxl);

    h1 {
      max-width: 18ch;
    }

    .hero-text {
      font-size: var(--text-lg);
      line-height: 1.7;
      color: var(--text-secondary);
      max-width: 46ch;
    }
  }

  .story-section {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 var(--spacing-lg) var(--spacing-2xl);
  }

  .story-block {
    h2 {
      font-family: var(--font-serif);
      font-size: var(--text-xxl);
      font-weight: 500;
      line-height: 1.2;
      margin-bottom: var(--spacing-md);
    }

    p {
      font-size: var(--text-md);
      line-height: 1.75;
      color: var(--text-secondary);
      margin-bottom: var(--spacing-md);
    }
  }

  .story-accent {
    background: var(--surface-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-xl);
    padding: var(--spacing-xl) var(--spacing-lg);
    position: relative;

    &::before {
      content: '';
      position: absolute;
      top: 0;
      left: var(--spacing-lg);
      right: var(--spacing-lg);
      height: 3px;
      background: var(--accent);
      border-radius: 0 0 2px 2px;
    }

    blockquote {
      font-family: var(--font-serif);
      font-size: var(--text-lg);
      font-weight: 400;
      font-style: italic;
      line-height: 1.4;
      color: var(--text-primary);
      margin-bottom: var(--spacing-lg);
    }

    .accent-person {
      display: flex;
      align-items: center;
      gap: var(--spacing-sm);
    }

    .accent-photo {
      width: 48px;
      height: 48px;
      border-radius: 50%;
      object-fit: cover;
      flex-shrink: 0;
    }

    cite {
      font-style: normal;
      font-size: var(--text-sm);
      font-weight: 600;
      color: var(--text-primary);
      display: block;
    }

    .accent-title {
      font-size: var(--text-xs);
      color: var(--text-tertiary);
      display: block;
    }
  }

  .founder-section {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 var(--spacing-lg) var(--spacing-2xl);
  }

  .founder-photo {
    width: 100%;
    max-width: 360px;
    aspect-ratio: 2 / 3;
    object-fit: cover;
    border-radius: var(--radius-xl);
    border: 1px solid var(--border-subtle);
  }

  .founder-copy {
    h2 {
      font-family: var(--font-serif);
      font-size: var(--text-xxl);
      font-weight: 500;
      line-height: 1.2;
      margin-bottom: var(--spacing-xxs);
    }

    .founder-title {
      font-size: var(--text-sm);
      color: var(--accent);
      font-weight: 600;
      margin-bottom: var(--spacing-md);
    }

    p {
      font-size: var(--text-md);
      line-height: 1.75;
      color: var(--text-secondary);
      margin-bottom: var(--spacing-md);
    }
  }

  .values-section {
    .section-head {
      color: var(--accent-hover);
    }
  }

  .values-inner {
    max-width: var(--max-width);
    margin: 0 auto;
  }

  .values-header {
    margin-bottom: var(--spacing-xxl);

    h2 {
      font-family: var(--font-serif);
      font-size: var(--text-xxl);
      font-weight: 500;
      line-height: 1.2;
      max-width: 26ch;
    }
  }

  .values-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-lg);

    @media (min-width: 100ch) {
      grid-template-columns: repeat(3, 1fr);
      gap: var(--spacing-xl);
    }
  }

  .value-card {
    border-top: 1px solid rgba(250, 247, 242, 0.12); /* faint --surface-page rule on dark section */
    padding-top: var(--spacing-lg);

    .step-num {
      --step-num-size: var(--text-3xl);
      --step-num-color: var(--accent-hover);
      margin-bottom: var(--spacing-md);
      opacity: 0.7;
    }

    h3 {
      font-family: var(--font-serif);
      font-size: var(--text-lg);
      font-weight: 500;
      margin-bottom: var(--spacing-sm);
      color: var(--text-on-dark);
    }

    p {
      font-size: var(--text-sm);
      line-height: 1.7;
      color: var(--text-tertiary);
    }
  }

  .approach-section {
    width: 100%;
    background: var(--surface-cream-dark);
    padding: var(--spacing-2xl) var(--spacing-lg);
  }

  .approach-inner {
    max-width: var(--max-width);
    margin: 0 auto;

    h2 {
      font-family: var(--font-serif);
      font-size: var(--text-xxl);
      font-weight: 500;
      line-height: 1.2;
      margin-bottom: var(--spacing-sm);
    }

    .approach-copy p {
      font-size: var(--text-md);
      line-height: 1.7;
      color: var(--text-secondary);
    }
  }

  .approach-steps {
    display: flex;
    flex-direction: column;
  }

  .approach-step {
    display: grid;
    grid-template-columns: 48px 1fr;
    gap: var(--spacing-md);
    align-items: start;
    padding: var(--spacing-lg) 0;
    border-bottom: 1px solid var(--border-subtle);
  }
  .approach-step:last-child {
    border-bottom: none;
  }

  .step-marker {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 2px solid var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent);
  }

  .approach-step h4 {
    font-size: var(--text-md);
    font-weight: 600;
    margin-bottom: var(--spacing-xxs);
  }

  .approach-step p {
    font-size: var(--text-xs);
    line-height: 1.6;
    color: var(--text-secondary);
  }
}