body.about-body {
  background: radial-gradient(circle at top left, rgba(255, 255, 255, 0.9), rgba(244, 238, 229, 0.9));
}

.about-main {
  position: relative;
}

.about-hero {
  padding-top: calc(var(--space-4xl) + var(--layout-header-height-lg));
  padding-bottom: var(--space-3xl);
}

.about-hero-inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xl);
}

.about-hero-layout {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--grid-gap-lg);
  align-items: center;
}

.about-hero-layout-a,
.about-hero-layout-b {
  transition: opacity var(--transition-slow), transform var(--transition-slow);
}

.about-hero-layout-a[aria-hidden="true"],
.about-hero-layout-b[aria-hidden="true"] {
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
}

.about-hero-layout-a:not([aria-hidden="true"]),
.about-hero-layout-b:not([aria-hidden="true"]) {
  opacity: 1;
  transform: translateY(0);
}

.about-hero-copy {
  grid-column: span 7;
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  min-width: 0;
}

.about-hero-media {
  grid-column: span 5;
  min-width: 0;
}

.about-hero-layout-b .about-hero-media {
  grid-column: span 8;
}

.about-hero-layout-b .about-hero-copy {
  grid-column: span 4;
}

.about-hero-eyebrow {
  letter-spacing: 0.22em;
}

.about-hero-meta {
  margin-top: var(--space-sm);
}

.about-hero-cta {
  margin-top: var(--space-md);
  flex-wrap: wrap;
}

.about-hero-figure {
  background: radial-gradient(circle at top left, rgba(255, 255, 255, 0.9), rgba(232, 223, 210, 0.9));
  box-shadow: var(--shadow-elevated);
}

.about-hero-image {
  filter: saturate(0.95) contrast(1.02);
}

.about-hero-caption {
  padding: var(--space-md) var(--space-lg);
  font-size: var(--font-size-sm);
  color: var(--color-text-soft);
}

.about-section-header {
  text-align: left;
  margin-bottom: var(--space-2xl);
}

.about-section-header .meta-label {
  margin-bottom: var(--space-xs);
}

.about-story {
  padding-block: var(--space-4xl);
}

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

.about-story-text {
  min-width: 0;
}

.about-story-media {
  min-width: 0;
}

.about-story-figure {
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(236, 228, 216, 0.96));
}

.about-story-image {
  transform: scale(1.02);
}

.about-founders {
  padding-block: var(--space-4xl);
}

.about-founders-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: var(--grid-gap-lg);
  align-items: center;
}

.about-founders-media,
.about-founders-text {
  min-width: 0;
}

.about-founders-figure {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(230, 222, 210, 0.96));
}

.about-experience {
  padding-block: var(--space-4xl);
}

.about-experience-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: var(--grid-gap-lg);
  align-items: center;
}

.about-experience-text,
.about-experience-media {
  min-width: 0;
}

.about-experience-figure {
  background: radial-gradient(circle at center, rgba(255, 255, 255, 0.98), rgba(236, 228, 216, 0.96));
}

.about-figure-caption {
  padding: var(--space-md) var(--space-lg);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.about-closing {
  padding-bottom: var(--space-4xl);
}

.about-closing-surface {
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-soft);
}

.about-closing-inner {
  padding: var(--space-2xl) var(--space-2xl);
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.about-closing-copy {
  max-width: var(--content-max-width);
}

.about-closing-actions {
  margin-top: var(--space-sm);
  flex-wrap: wrap;
}

.about-closing-actions .button,
.about-closing-actions .btn {
  max-width: 100%;
}

.about-closing-actions .button-ghost {
  border-color: transparent;
}

.about-closing-actions .button-ghost:hover {
  background-color: var(--color-accent-primary-soft);
  color: var(--color-accent-contrast);
}

.about-hero .button,
.about-hero .btn {
  max-width: 100%;
}

@media (max-width: 1199.98px) {
  .about-hero {
    padding-top: calc(var(--space-3xl) + var(--layout-header-height));
  }

  .about-story-grid,
  .about-founders-layout,
  .about-experience-layout {
    gap: var(--grid-gap-md);
  }
}

@media (max-width: 1023.98px) {
  .about-hero-layout {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }

  .about-hero-copy,
  .about-hero-media,
  .about-hero-layout-b .about-hero-media,
  .about-hero-layout-b .about-hero-copy {
    grid-column: span 12;
  }

  .about-story-grid {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  }

  .about-founders-layout,
  .about-experience-layout {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}

@media (max-width: 767.98px) {
  .about-hero {
    padding-top: calc(var(--space-2xl) + var(--layout-header-height));
    padding-bottom: var(--space-2xl);
  }

  .about-hero-inner {
    gap: var(--space-xl);
  }

  .about-hero-layout {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .about-hero-copy,
  .about-hero-media,
  .about-hero-layout-b .about-hero-media,
  .about-hero-layout-b .about-hero-copy {
    grid-column: span 6;
  }

  .about-hero-cta {
    flex-direction: column;
    align-items: stretch;
  }

  .about-story,
  .about-founders,
  .about-experience {
    padding-block: var(--space-3xl);
  }

  .about-story-grid,
  .about-founders-layout,
  .about-experience-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .about-closing-inner {
    padding: var(--space-xl) var(--space-lg);
  }

  .about-closing-actions {
    flex-direction: column;
    align-items: stretch;
  }
}

@media (max-width: 479.98px) {
  .about-hero-caption,
  .about-figure-caption {
    padding-inline: var(--space-md);
  }

  .about-closing-inner {
    padding: var(--space-xl) var(--space-md);
  }
}