/*
 * Site-owned CSS, loaded AFTER the mirrored Webflow stylesheet.
 *
 * The Webflow CSS under /cdn is a byte mirror of the client's published site and
 * is left alone, so that a re-mirror can never silently drop our work and a diff
 * against Webflow stays meaningful. Anything we deliberately change or add lives
 * here instead, with the reason written next to it.
 *
 * Every rule below is scoped to the element it is about. Nothing here restyles
 * the ported design.
 */

/* -------------------------------------------------------------------------
 * /team — the family photo, whole, on phones and tablets
 *
 * Ticket 86bbq5pn4. The photo is portrait 2:3 (540x810), but from 991px down —
 * where the two-column row has already stacked — its container is a fixed
 * landscape box the full width of the screen: 500px tall at <=991px and <=767px,
 * 340px at <=479px. The ported `object-fit: cover` fills that box by cropping the
 * picture top and bottom, which on a phone is about 110px off each end and took
 * the heads off two of the five people in it.
 *
 * So at those widths the box takes its height from the picture instead of the
 * other way round. Desktop is untouched: the client reports it correct there, and
 * it is the design we ported.
 * ---------------------------------------------------------------------- */
@media screen and (max-width: 991px) {
  .team-hero-right .home-flex-image.full {
    height: auto;
  }

  .team-hero-right .home-flex-image.full .image.cover.about {
    width: 100%;
    height: auto;
    display: block;
  }
}

/* -------------------------------------------------------------------------
 * /team — "Meet the Team"
 *
 * Tickets 86bbq5pn4 and 86bbq5qpc. The section is built from the client's own
 * Webflow classes — `.team-hero-item`, `.team-hero-item-image`,
 * `.team-hero-item-designation`, `.team-hero-item-summary` — which their
 * designer styled for exactly this and which the published site never used.
 * What follows is only what those classes leave undefined.
 * ---------------------------------------------------------------------- */

/* The whole-crew photo. Natural aspect ratio, so nobody in it is cropped. */
.rs-crew-photo {
  width: 100%;
  height: auto;
  display: block;
}

/*
 * `.team-hero-grid` verbatim, minus the two properties that belong to its one
 * existing use (pulling the Our Story block up under the hero, and centring a
 * two-item row). Cards here are different heights and must line up at the top.
 */
.rs-team-grid {
  margin-top: 0;
  align-items: stretch;
}

/*
 * Two columns and up. `.section-title-wrap` centres everything inside it, which
 * is right for the heading but leaves a 100-word bio centred under a name and a
 * role the card already left-aligns. Below 992px the grid is a single column of
 * centred cards, which is how the client's own rules style them — left alone.
 */
@media screen and (min-width: 992px) {
  .rs-team-grid {
    grid-row-gap: 40px;
  }

  .rs-team-grid .team-hero-item {
    text-align: left;
  }
}

/* The headshot fills the circle `.team-hero-item-image` already defines. */
.rs-team-headshot {
  object-fit: cover;
  width: 100%;
  height: 100%;
  display: block;
}

/* `.team-hero-item-designation` has no base rule — only a line-height above 1920px. */
.team-hero-item-designation {
  color: var(--dk-med-blue);
  letter-spacing: .04em;
  text-transform: uppercase;
  margin-bottom: 16px;
  font-size: 14px;
  font-weight: 700;
}

/* Likewise the bio: sized to the site's secondary text rather than the 18px body. */
.team-hero-item-summary {
  margin-bottom: 0;
  font-size: 16px;
  line-height: 1.6;
}