/* ==========================================================================
   ABOUT PAGE
   ========================================================================== */

.page-hero {
  padding-block: var(--sp-7) var(--sp-6);
  background: var(--asphalt);
  color: var(--paper);
}
.page-hero .breadcrumb { color: rgba(247,246,243,0.55); margin-bottom: var(--sp-4); }
.page-hero .breadcrumb a { color: rgba(247,246,243,0.75); }
.page-hero h1 { color: #fff; max-width: 16ch; }
.page-hero p.lead { color: rgba(247,246,243,0.75); margin-top: var(--sp-3); max-width: 56ch; }

.story-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: var(--sp-7);
}
@media (max-width: 860px) {
  .story-grid { grid-template-columns: 1fr; gap: var(--sp-5); }
}
.story-grid img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  border-radius: var(--radius-m);
  position: sticky;
  top: 100px;
}
@media (max-width: 860px) {
  .story-grid img { position: static; aspect-ratio: 4/3; }
}
.story-copy p { margin-bottom: var(--sp-4); color: var(--text-muted); }
.story-copy p:first-of-type {
  font-size: var(--fs-body-l);
  color: var(--ink);
}

.facility-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-4);
}
@media (max-width: 640px) { .facility-grid { grid-template-columns: 1fr; } }
.facility-item {
  border: 1px solid var(--line-on-dark);
  border-radius: var(--radius-m);
  padding: var(--sp-4);
}
.facility-item__label {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: var(--sp-2);
}
.facility-item address { font-style: normal; color: rgba(247,246,243,0.8); line-height: var(--lh-normal); }