/* ==========================================================================
   SECTION: ABOUT US — who Dynamic Fusion is, up front
   ========================================================================== */

.about { background: var(--c-white); }

/* Columns stretch to the tallest, so the photo runs the full height of the copy. */
.about__layout {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: var(--sp-16);
  align-items: stretch;
}

/* Left column — the story ------------------------------------------------- */
.about__lead .t-lead {
  color: var(--c-ink);
  font-weight: var(--w-medium);
  margin-bottom: var(--sp-5);
}
.about__lead p + p { margin-top: var(--sp-5); }

.about__actions {
  display: flex; flex-wrap: wrap; gap: var(--sp-4);
  margin-top: var(--sp-8);
}

/* Right column — a photo, then the facts card ------------------------------ */

.about__media {
  position: relative;
  border-radius: 22px;              /* softly curved, no sharp corners */
  overflow: hidden;
  min-height: 100%;                 /* run the full height of the copy beside it */
}
.about__media img {
  width: 100%;
  height: 100%;
  min-height: 420px;                /* floor, for when the copy is short */
  object-fit: cover;
  display: block;
  border-radius: inherit;
  transition: transform 900ms var(--ease);
}
.about__media:hover img { transform: scale(1.05); }

/* Company details — a horizontal band spanning the full section, sitting under
   the copy and the photo. Each fact is a column, not a stacked row. */
.about__facts {
  /* Clear breathing room between the buttons/photo above and this band. */
  margin-top: calc(var(--sp-16) * 2);
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-top: 3px solid var(--c-primary);
  border-radius: 22px;              /* match the curve on the photo */
  padding: var(--sp-10) var(--sp-8);
}

/* The original tabular form — label beside value, one divider per row — but run
   as two tables side by side so it fills the band horizontally. */
.about__facts dl {
  margin: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: var(--sp-12);
}

.about__fact {
  display: grid;
  grid-template-columns: 8.5rem 1fr;
  gap: var(--sp-4);
  padding-block: var(--sp-5);
  border-bottom: 1px solid var(--c-line);
}
/* Top row of each column has no top padding; bottom row drops its rule.
   These are position-based: 8 facts = 4 rows of 2. If you add or remove a fact,
   move the second pair to the new last two positions or a divider strands
   itself mid-table. */
.about__fact:nth-child(1),
.about__fact:nth-child(2) { padding-top: 0; }
.about__fact:nth-child(7),
.about__fact:nth-child(8) { padding-bottom: 0; border-bottom: 0; }

.about__fact dt {
  font-size: var(--fs-eyebrow);
  font-weight: var(--w-bold);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--c-muted);
  line-height: 1.5;
}
.about__fact dd {
  margin: 0;
  font-size: var(--fs-small);
  line-height: 1.6;
  color: var(--c-ink);
  font-weight: var(--w-medium);
}

@media (max-width: 900px) {
  .about__layout { grid-template-columns: 1fr; gap: var(--sp-10); }
  .about__media img { min-height: 0; aspect-ratio: 16 / 10; }
  .about__facts  { margin-top: var(--sp-12); padding: var(--sp-8) var(--sp-6); }

  /* One table again — restore the simple top/bottom row rules. */
  .about__facts dl { grid-template-columns: 1fr; }
  .about__fact { padding-block: var(--sp-4); border-bottom: 1px solid var(--c-line); }
  .about__fact:nth-child(2) { padding-top: var(--sp-4); }
  .about__fact:nth-child(7) { padding-bottom: var(--sp-4); border-bottom: 1px solid var(--c-line); }
  .about__fact:first-child  { padding-top: 0; }
  .about__fact:last-child   { padding-bottom: 0; border-bottom: 0; }
}
@media (max-width: 560px) {
  .about__fact { grid-template-columns: 1fr; gap: var(--sp-1); }
}