.section-team {
  position: relative;
  padding: var(--theme-space-lg) var(--theme-section-padding) var(--theme-space-xl);
}

/* Same seam-cover trick as .section-cta (see parts/section-cta.css) —
   .section-cta itself gets the thin outer 2px seam via its own
   ::before, and .section-cta__frame (its inner wrapper) gets its own
   ::before (top spacer)/::after (bottom spacer covering content
   sliding behind the sticky CTA). .section-team mirrors that
   structure exactly, including the __frame/__frame-inner split — the
   CTA must live inside __frame-inner (a separate element from the one
   carrying ::before/::after), otherwise it sits at the same level as
   those pseudo-elements and can visually collide with them. */
.section-team::before {
  content: "";
  display: block;
  position: sticky;
  top: -1px;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: var(--theme-color-background);
  z-index: 2;
}

.section-team__frame {
  position: relative;
}

.section-team__frame::before,
.section-team__frame::after {
  content: "";
  display: block;
  position: sticky;
  left: 0;
  width: 100%;
  height: var(--theme-section-padding);
  background-color: var(--theme-color-background);
  z-index: 2;
}

.section-team__frame::before {
  top: 0;
}

.section-team__frame::after {
  z-index: 1;
  bottom: 0;
  box-shadow: 0 -1px 0 0 black;
}

.section-team__frame-inner {
  position: relative;
}

.section-team h2 {
  padding: var(--theme-section-padding);
  text-transform: uppercase;
  font-size: clamp(1.75rem, 4vw, 3rem);
  text-align: center;
  margin: 0;
}

/* Sticky CTA lives inside .section-team on this page instead of
   after it — same sticky-cta.php template, but rendered with
   root_class="section-team__cta" so it doesn't inherit
   .brand-frame__cta's shared positioning rules (which assume a
   .brand__frame/.section-hero__inner parent this section isn't). All
   -inner/-cell/-text child classes are unchanged, so only this root
   rule needs to be replicated here. */
.section-team__cta {
  position: sticky;
  bottom: var(--theme-section-padding);
  left: 0;
  right: 0;
  width: 100%;
  z-index: 1;
  height: var(--theme-header-height);
  color: var(--theme-color-text);
  border-left: 1px solid black;
  box-sizing: border-box;
}

.section-team__cta-inner {
  display: grid;
  border-bottom: var(--theme-line-width) solid var(--theme-line-color);
  grid-template-columns: repeat(var(--theme-grid-columns), 1fr);
  height: 100%;
  border-top-width: 0;
  box-sizing: content-box;
}

.section-team__cta-cell {
  display: flex;
  align-items: center;
  padding: 0 var(--theme-section-padding);
  border-top: var(--theme-line-width) solid var(--theme-line-color);
}

.section-team__cta-cell--action {
  position: relative;
  overflow: hidden;
  background-color: var(--brand-color-dark);
  color: var(--brand-color-light);
  justify-content: center;
  padding: .2rem .3rem .2rem .2rem;
  border-left: var(--theme-line-width) solid var(--theme-line-color);
  border-top: var(--theme-line-width) solid var(--theme-line-color);
  text-decoration: none;
  text-transform: uppercase;
  font-weight: 500;
}

.section-team__cta-cell--action .button__label {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 0 var(--theme-section-padding);
  transform: translateX(0);
  transition: transform 0.5s var(--theme-ease-signature);
}

.section-team__cta-cell--action .button__label::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 var(--theme-section-padding);
  background-color: var(--theme-color-accent);
  color: var(--theme-color-primary);
  transform: translateX(100%);
}

.section-team__cta-cell--action:hover .button__label {
  transform: translateX(-100%);
}

.section-team__cta-cell--text {
  background-color: white;
}

.section-team__cta-text {
  margin: 0;
}

@media (width <= 768px) {
  .section-team__cta-cell--text {
    display: none;
  }

  .section-team__cta-cell--action {
    grid-column: span 6; /* was col-2 from brand-grid.css — beaten here via source order (about.css loads after brand-grid.css, same 0,1,0 specificity), same trick used across the rest of the site's <=768px overrides */
  }
}

/* .team-grid's own layout (base + responsive tiers) lives entirely in
   assets/css/parts/team-member-card.css now — it used to be split
   across both files, and since this about.css page stylesheet is
   enqueued after that part's, its unconditional base rule was winning
   the specificity tie over that file's own `@media (width <= 768px)`
   override at every width, silently breaking the 2-per-row mobile
   tier. Keeping all of it in one file guarantees correct source order
   regardless of enqueue sequence. */