.about-page { background: var(--color-surface); }
.about-hero { position: relative; overflow: hidden; padding-block: var(--section-gap); border-block-end: var(--border-width) solid var(--color-border-soft); background: radial-gradient(circle at 85% 18%, rgb(220 21 27 / .09), transparent 22rem), linear-gradient(145deg, var(--color-surface), var(--color-surface-soft)); }
.about-hero::after { content: ""; position: absolute; inset-inline-end: -10rem; inset-block-start: -13rem; inline-size: 30rem; aspect-ratio: 1; border: 1px solid var(--color-primary-line); border-radius: 50%; box-shadow: 0 0 0 4rem rgb(220 21 27 / .025); pointer-events: none; }
.about-hero__content { position: relative; z-index: 1; max-inline-size: 54rem; }
.about-hero h1 { max-inline-size: 15ch; }
.about-hero__lead { max-inline-size: 66ch; line-height: 2; }
.about-breadcrumb { margin-block-end: var(--space-8); }

.about-story,
.about-pillars,
.about-scope,
.about-approach { padding-block: var(--section-gap); border-block-end: var(--border-width) solid var(--color-border-soft); }
.about-story { background: var(--color-surface); }
.about-story__layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-8); align-items: start; }
.about-section-heading { max-inline-size: 30rem; }
.about-story__copy { max-inline-size: 76ch; padding: var(--space-8); border: var(--border-width) solid var(--color-border-soft); border-inline-start: 3px solid var(--color-primary); border-radius: var(--radius-lg); background: linear-gradient(145deg, rgb(255 255 255 / .98), rgb(248 248 247 / .9)); box-shadow: var(--shadow-elevation-1); color: var(--color-text-secondary); line-height: 2.1; }
.about-story__copy p { margin: 0; }

.about-pillars { background: var(--pattern-industrial-lines), linear-gradient(145deg, var(--color-surface-soft), var(--color-surface-muted)); }
.about-card-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); margin-block-start: var(--space-8); }
.about-card { min-block-size: 14rem; padding: var(--space-8); border: var(--border-width) solid var(--color-border-soft); border-block-start: 3px solid var(--color-primary); border-radius: var(--radius-lg); background: rgb(255 255 255 / .92); box-shadow: var(--shadow-elevation-1); }
.about-card__number { color: var(--color-primary); font: var(--text-caption)/var(--leading-control) var(--font-mono); }
.about-card p { color: var(--color-text-secondary); line-height: 1.9; }

.about-scope { background: var(--color-surface); }
.about-scope__layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-8); }
.about-scope__list { display: grid; gap: var(--space-3); }
.about-scope__item { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-4); align-items: start; padding: var(--space-6); border: var(--border-width) solid var(--color-border-soft); border-radius: var(--radius-md); background: var(--color-surface-soft); }
.about-scope__mark { inline-size: var(--space-3); block-size: var(--space-3); margin-block-start: .45rem; border-radius: 50%; background: var(--color-primary); box-shadow: 0 0 0 .4rem var(--color-primary-soft); }
.about-scope__item p { margin: var(--space-2) 0 0; color: var(--color-text-secondary); line-height: 1.85; }

.about-approach { background: linear-gradient(145deg, var(--color-surface-soft), var(--color-surface)); }
.about-approach__panel { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-8); align-items: center; padding: var(--space-8); border: var(--border-width) solid var(--color-border-soft); border-radius: var(--radius-lg); background: rgb(255 255 255 / .94); box-shadow: var(--shadow-elevation-2); }
.about-approach__copy { max-inline-size: 70ch; }
.about-approach__copy p { color: var(--color-text-secondary); line-height: 2; }
.about-approach__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }

@media (min-width: 48rem) {
  .about-card-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .about-scope__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 64rem) {
  .about-story__layout,
  .about-scope__layout { grid-template-columns: minmax(15rem, .72fr) minmax(0, 1.28fr); gap: var(--space-12); }
  .about-approach__panel { grid-template-columns: minmax(0, 1fr) auto; padding: var(--space-12); }
}

@media (max-width: 39.99rem) {
  .about-story__copy,
  .about-card,
  .about-approach__panel { padding: var(--space-6); }
  .about-approach__actions .ui-button { inline-size: 100%; }
}