/* ==========================================================================
   ABOUT — dark background panel, 55/45 split
   Markup: section#about.about > .split.split--reverse.about__inner
             > .about__image, .about__content.panel
   Uses the shared .split grid (utilities.css); --reverse puts the 45% image
   column first so it lands on the left, content column (55%) on the right.
   ========================================================================== */

.about {
  background: var(--color-bg-dark);
}

/* ---- Image column ---------------------------------------------------------*/
.about__image {
  position: relative;
  overflow: hidden;
  min-height: 480px;
}

.about__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.about__image-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, transparent 60%, rgba(17, 17, 17, 0.6) 100%);
}

/* ---- Content column --------------------------------------------------------*/
.about__content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-left: 4px solid var(--color-brand-red);
}

.about__heading {
  color: var(--color-white);
  margin-bottom: var(--space-lg);
}

.about__paragraph {
  max-width: 460px;
  margin-bottom: var(--space-md);
}

.about__paragraph:last-of-type {
  margin-bottom: var(--space-lg);
}

/* ---- Stats -------------------------------------------------------------- */
.about__stats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-lg);
}

.about__stat-label {
  color: var(--color-white-45);
  margin-top: var(--space-xs);
}

/* ---- Mobile: stack, border moves to the top of the content column --------*/
@media (max-width: 899px) {
  .about__image {
    min-height: 280px;
  }

  .about__content {
    border-left: none;
    border-top: 4px solid var(--color-brand-red);
  }
}