/* About page: management overview instead of the photo grid of all staff.
   Follows the old site's team page (board, management, site management, administration),
   names only, no portraits. */
.kt-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 4rem 6rem;
  align-items: start;
}

/* left column: section head, lead text and the crew panel, stays in view while the list scrolls */
.kt-intro {
  position: sticky;
  top: 7rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.kt-lead {
  max-width: 26rem;
  color: #4a5c55;
}
.kt-crew {
  margin-top: 1rem;
  padding: 2rem;
  border-radius: 1.25rem;
  background: var(--_colors---core-neutral-color--green);
  color: #fff;
}
.kt-crew-number {
  font-size: 4.5rem;
  line-height: 1;
  font-weight: 500;
  letter-spacing: -0.04em;
}
.kt-crew-text {
  margin-top: .75rem;
  max-width: 20rem;
  color: rgba(255, 255, 255, .85);
}
.kt-crew-link {
  display: inline-flex;
  margin-top: 1.5rem;
  padding: .75rem 1.25rem;
  border-radius: 999px;
  background: var(--_colors---core-neutral-color--accent);
  color: #04382A;
  font-weight: 500;
  text-decoration: none;
  transition: background-color .2s;
}
.kt-crew-link:hover { background: #fff; }
.kt-crew-link:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

/* right column: one row per function, label left, people right */
.kt-group {
  display: grid;
  grid-template-columns: 11rem minmax(0, 1fr);
  gap: 1rem 2rem;
  padding: 2rem 0;
  border-top: 1px solid #d9e0dc;
}
.kt-group:last-child { border-bottom: 1px solid #d9e0dc; }
.kt-group-label {
  padding-top: .6rem;
  color: var(--_colors---core-neutral-color--green);
  font-weight: 500;
}
.kt-people {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.kt-name {
  margin: 0;
  color: #04382A;
  font-size: clamp(1.625rem, 2.4vw, 2.25rem);
  line-height: 1.15;
  font-weight: 500;
  letter-spacing: -0.02em;
}
.kt-role {
  margin-top: .3rem;
  color: #5b6b65;
}

@media screen and (max-width: 991px) {
  .kt-grid { grid-template-columns: 1fr; gap: 3rem; }
  .kt-intro { position: static; }
}
@media screen and (max-width: 767px) {
  .kt-group { grid-template-columns: 1fr; gap: .75rem; padding: 1.5rem 0; }
  .kt-group-label { padding-top: 0; }
  .kt-crew { padding: 1.5rem; }
  .kt-crew-number { font-size: 3.5rem; }
}

/* the template tag spreads icon and text across the full width inside a flex column */
.kt-intro > .element-wrap { align-self: flex-start; }
.kt-crew-approx {
  display: block;
  margin-bottom: .5rem;
  font-size: 1rem;
  letter-spacing: 0;
  color: rgba(255, 255, 255, .85);
}