/* ==========================================================================
   SECTION: EXPERTISE — legal & regulatory / project mgmt / asset mgmt
   ========================================================================== */

.expertise { background: var(--c-surface); }

.expertise__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-8);
}

.expertise__col { display: flex; flex-direction: column; }

.expertise__media {
  aspect-ratio: 4 / 3;
  background: var(--c-base-soft);
  border-radius: 22px;              /* soft corners, matching About and FAQ */
  overflow: hidden;
  margin-bottom: var(--sp-5);
}
.expertise__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  border-radius: inherit;
  transition: transform 700ms var(--ease);
}
.expertise__col:hover .expertise__media img { transform: scale(1.05); }

.expertise__col h3 {
  font-size: var(--fs-eyebrow);
  font-weight: var(--w-bold);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--c-accent);
  margin-bottom: var(--sp-3);
}
.expertise__col p {
  font-size: var(--fs-small);
  line-height: 1.7;
  max-width: none;
}

/* Three across, so the columns should terminate on the same line. The copy is
   written to roughly equal length, but a one-word edit shouldn't be able to
   leave a column a line short — this floors all three at five lines
   (5 × 1.7 line-height). Applied only while the grid is actually three
   columns; stacked on mobile it would just add dead space. */
@media (min-width: 901px) {
  .expertise__col p { min-height: calc(5 * 1.7em); }
}

@media (max-width: 900px) {
  .expertise__grid { grid-template-columns: 1fr; gap: var(--sp-10); }
  .expertise__media { aspect-ratio: 16 / 9; }
}