.about-page {
  padding-top: var(--header-height);
  background: #050505;
  color: var(--text-primary);
  overflow: hidden;
}

.about-page h1,
.about-page h2,
.about-page h3 { color: inherit; text-wrap: balance; }

.about-page p { text-wrap: pretty; }

.about-shell { width: min(100% - 48px, 1240px); margin-inline: auto; }

.about-hero {
  padding: clamp(5rem, 9vw, 8.5rem) 0 clamp(4.5rem, 8vw, 7rem);
  border-bottom: 1px solid #1a1a1e;
}

.about-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(320px, .65fr);
  gap: clamp(3rem, 9vw, 9rem);
  align-items: end;
}

.about-kicker {
  margin: 0 0 var(--space-5);
  color: var(--brand-primary);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: .08em;
  text-transform: uppercase;
}

.about-hero h1 {
  max-width: 850px;
  margin: 0;
  font-size: clamp(3.25rem, 6.7vw, 6rem);
  font-weight: 500;
  letter-spacing: -.04em;
  line-height: .96;
}

.about-hero__intro {
  margin: 0;
  color: var(--text-secondary);
  font-family: var(--font-serif);
  font-size: clamp(1.08rem, 1.5vw, 1.3rem);
  line-height: 1.7;
}

.about-story { padding: clamp(4.5rem, 7vw, 6.5rem) 0; }

.about-story__grid {
  display: grid;
  grid-template-columns: minmax(220px, .55fr) minmax(0, 1.2fr);
  gap: clamp(3rem, 10vw, 10rem);
}

.about-story h2,
.about-details h2 {
  margin: 0;
  font-size: clamp(2.3rem, 4vw, 3.8rem);
  font-weight: 500;
  letter-spacing: -.035em;
  line-height: 1;
}

.about-story__copy { max-width: 720px; }
.about-story__copy p { margin: 0 0 1.35rem; color: var(--text-secondary); font-size: 1.06rem; line-height: 1.8; }
.about-story__copy p:first-child { color: #fff; font-family: var(--font-serif); font-size: clamp(1.35rem, 2.1vw, 1.75rem); line-height: 1.5; }

.about-work {
  padding: clamp(4.5rem, 7vw, 6.5rem) 0;
  background: #0b0b0d;
  border-block: 1px solid #1a1a1e;
}

.about-work__head { max-width: 700px; margin-bottom: var(--space-10); }
.about-work__head h2 { margin: 0 0 var(--space-4); font-size: clamp(2.3rem, 4vw, 3.8rem); }
.about-work__head p { margin: 0; color: var(--text-secondary); font-size: 1.05rem; line-height: 1.7; }

.about-work__images { display: grid; grid-template-columns: repeat(12, 1fr); grid-auto-rows: clamp(210px, 20vw, 290px); gap: var(--space-3); }

.about-work__image { min-width: 0; grid-column: span 4; overflow: hidden; border-radius: var(--radius-lg); background: #111115; }
.about-work__image:first-child,
.about-work__image:nth-child(5) { grid-column: span 5; }
.about-work__image:nth-child(2),
.about-work__image:nth-child(4) { grid-column: span 4; }
.about-work__image:nth-child(3),
.about-work__image:nth-child(6) { grid-column: span 3; }
.about-work__image img { width: 100%; height: 100%; object-fit: cover; object-position: left top; }
.about-work__image:nth-child(3) img,
.about-work__image:nth-child(6) img { object-position: center top; }

.about-details { padding: clamp(4.5rem, 7vw, 6.5rem) 0; }
.about-details__grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(3rem, 9vw, 9rem); }
.about-principles { border-top: 1px solid #29292f; }
.about-principle { padding: var(--space-6) 0; border-bottom: 1px solid #29292f; }
.about-principle h3 { margin: 0 0 var(--space-2); font-size: 1.15rem; }
.about-principle p { margin: 0; color: var(--text-secondary); line-height: 1.7; }

.about-cta { padding: clamp(5rem, 9vw, 8rem) 0; background: var(--brand-primary); color: #090909; }
.about-cta__inner { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-8); align-items: end; }
.about-cta h2 { max-width: 790px; margin: 0; font-size: clamp(2.7rem, 5vw, 4.8rem); font-weight: 500; line-height: .98; letter-spacing: -.035em; }
.about-cta__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.about-cta .btn-primary { background: #090909; border-color: #090909; color: #fff; }
.about-cta .btn-outline { border-color: #090909; color: #090909; }
.about-cta .btn-outline:hover { background: #090909; color: #fff; }

@media (max-width: 850px) {
  .about-hero__grid,
  .about-story__grid,
  .about-details__grid,
  .about-cta__inner { grid-template-columns: 1fr; }
  .about-hero__grid { align-items: start; }
  .about-work__images { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 260px; }
  .about-work__image,
  .about-work__image:first-child,
  .about-work__image:nth-child(2),
  .about-work__image:nth-child(3),
  .about-work__image:nth-child(4),
  .about-work__image:nth-child(5),
  .about-work__image:nth-child(6) { grid-column: auto; }
}

@media (max-width: 560px) {
  .about-shell { width: min(100% - 32px, 1240px); }
  .about-hero h1 { font-size: clamp(2.8rem, 14vw, 4rem); }
  .about-work__images { display: flex; gap: var(--space-3); overflow-x: auto; padding-bottom: var(--space-3); scroll-snap-type: x mandatory; scrollbar-width: thin; }
  .about-work__image,
  .about-work__image:first-child,
  .about-work__image:nth-child(2),
  .about-work__image:nth-child(3),
  .about-work__image:nth-child(4),
  .about-work__image:nth-child(5),
  .about-work__image:nth-child(6) { flex: 0 0 84%; height: 280px; scroll-snap-align: start; }
  .about-cta__actions { display: grid; }
  .about-cta__actions .btn { width: 100%; }
}