.connect-with-us {
  padding-block: var(--section-padding);
}

.connect-with-us-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: var(--space-m);
  width: 100%;
  max-width: 1170px;
  margin-inline: auto;
  padding-inline: 15px;
}

/* All columns share one row, or all stack: the basis is huge below --stack-width and 0 above it */
.connect-with-us-inner {
  --stack-width: 640px;
}

.connect-with-us-title {
  align-self: center;
  flex: 0 1 calc((var(--stack-width) - 100%) * 999);
}

.connect-with-us h2 {
  margin: 0;
}

/* Single person: the mockup's 2:1 landscape photo, capped so it doesn't grow past ~460px */
.connect-with-us-photo {
  flex: 1 1 calc((var(--stack-width) - 100%) * 999);
  aspect-ratio: 2 / 1;
  max-width: 460px;
}

.connect-with-us-photo .image-wrapper {
  display: block;
  position: relative;
  height: 100%;
  min-height: 150px;
  overflow: hidden;
}

.connect-with-us-photo img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Focus from the team member's Connect With Us X/Y fields (set on .image-wrapper); default = centered */
  object-position: var(--focal-x, 50%) var(--focal-y, 50%);
}

.connect-with-us-info h3,
.connect-with-us-info p,
.connect-with-us-info .team-contact {
  margin: 0 0 var(--space-3xs);
}

.team-contact,
.team-social {
  list-style: none;
  padding: 0;
}

.team-job-title {
  font-weight: 600;
}

.connect-with-us-info {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  flex: 1 1 calc((var(--stack-width) - 100%) * 999);
}

.connect-with-us-info .team-phone a {
  color: var(--orange);
  font-weight: 700;
}

.connect-with-us-info .btn {
  margin-top: var(--space-2xs);
}

.connect-with-us-info {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
}

/* Team variant (2+ people): title on its own row, then person cards.
   4 across on desktop, 2 on tablets, 1 on phones */
.connect-with-us--team .connect-with-us-title {
  flex: 1 1 100%;
}

.connect-with-us-people {
  flex: 1 1 100%;
  display: grid;
  /* auto-fit: columns only for people present (no empty tracks). Cards are capped at 320px
     so photos don't get huge with 2–3 people, and the row of cards is centered. */
  grid-template-columns: repeat(auto-fit, minmax(220px, 320px));
  justify-content: center;
  gap: var(--space-l) var(--space-m);
}

.connect-with-us-person {
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
}

.connect-with-us-person .image-wrapper {
  display: block;
  flex: 0 0 auto;
  /* never let the photo shrink */
  overflow: hidden;
}

/* Landscape like the single-person photo (3:2 here; 2:1 is too tight for a narrow card).
   Crop anchored to the top so heads stay in frame (default until a per-photo focal point is set). */
.connect-with-us-person .image-wrapper img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  /* Focus from the team member's Connect With Us X/Y fields (set on .image-wrapper); default = top */
  object-position: var(--focal-x, 50%) var(--focal-y, 0%);
}

/* The base .connect-with-us-info rule uses a flex-basis trick for the single-person row.
   Inside a vertical card that basis becomes a huge HEIGHT (tall cards, squashed photo), so reset it.
   Also stack name/title/phone tightly instead of the row's 2rem gap. */
.connect-with-us-person .connect-with-us-info {
  flex: 0 0 auto;
  gap: var(--space-3xs);
  justify-content: flex-start;
}