/* Shared team/staff highlight styles.
   To swap a team member later:
   1) replace the image in images/team/
   2) update the matching name, role, and bio in index.html and about/index.html */
.team-section{
  position:relative;
  padding:64px 0;
  background:#f7f9fc;
  border-top:1px solid #e6ebf1;
  border-bottom:1px solid #e6ebf1;
}
.team-section-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:34px;
  margin-bottom:28px;
}
.team-section-head .team-intro{max-width:760px}
.team-section-head h2{
  margin:10px 0 8px;
  color:var(--navy-900);
  font-size:clamp(28px,3vw,40px);
}
.team-section-head p{
  margin:0;
  color:var(--slate);
  line-height:1.65;
}
.team-link{
  flex:0 0 auto;
  color:var(--navy-700);
  font-weight:800;
  text-decoration:none;
  border-bottom:2px solid var(--gold);
  padding-bottom:4px;
}
.team-link:hover{color:var(--navy-900)}
.team-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:20px;
}
.team-card{
  min-width:0;
  display:grid;
  grid-template-columns:104px minmax(0,1fr);
  align-items:start;
  gap:18px;
  padding:22px;
  background:#fff;
  border:1px solid #e2e8f0;
  border-radius:14px;
  box-shadow:0 16px 34px -30px rgba(5,35,67,.55);
}
.team-photo{
  width:104px;
  height:104px;
  display:block;
  object-fit:cover;
  border-radius:50%;
  border:4px solid #fff;
  box-shadow:0 0 0 2px rgba(225,168,23,.62),0 10px 24px -18px rgba(5,35,67,.75);
}
.team-card h3{
  margin:4px 0 4px;
  color:var(--navy-900);
  font-size:20px;
  line-height:1.22;
}
.team-role{
  margin:0 0 10px;
  color:#8A5A00;
  font-size:12px;
  font-weight:800;
  letter-spacing:.07em;
  text-transform:uppercase;
}
.team-bio{
  margin:0;
  color:var(--slate);
  font-size:14px;
  line-height:1.58;
}
/* A bio may run to two paragraphs. .team-bio is margin:0, so without this the
   second would butt straight into the first. Scoped to an adjacent pair, so it
   cannot affect any single-paragraph card. */
.team-bio + .team-bio{margin-top:.7em}
.team-section--compact{padding:54px 0}
.team-section--compact .team-section-head{margin-bottom:22px}
.team-section--compact .team-card{padding:18px}
.team-section--compact .team-photo{width:96px;height:96px}
.team-section--compact .team-card{grid-template-columns:96px minmax(0,1fr)}
.team-section--compact .team-bio{font-size:13px;line-height:1.52}

/* More prominent treatment on the About page. */
.team-section--about{
  padding:82px 0 90px;
  background:
    radial-gradient(circle at 1px 1px,rgba(8,54,98,.055) 1px,transparent 1.2px) 0 0/22px 22px,
    linear-gradient(180deg,#fff 0%,#f5f8fb 100%);
}
.team-section--about .team-section-head{
  display:block;
  text-align:center;
  max-width:820px;
  margin:0 auto 38px;
}
.team-section--about .team-card{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  padding:30px 28px 32px;
  border-top:4px solid var(--gold);
  box-shadow:0 22px 42px -32px rgba(5,35,67,.62);
}
.team-section--about .team-photo{
  width:146px;
  height:146px;
  margin-bottom:14px;
}
.team-section--about .team-card h3{
  margin-top:0;
  font-size:23px;
}
.team-section--about .team-role{margin-bottom:14px}
.team-section--about .team-bio{
  max-width:34ch;
  font-size:15px;
  line-height:1.65;
}

@media (max-width:1050px){
  .team-grid{grid-template-columns:1fr}
  .team-card{
    grid-template-columns:112px minmax(0,1fr);
    align-items:center;
  }
  .team-photo{width:112px;height:112px}
  .team-section--compact .team-card{grid-template-columns:100px minmax(0,1fr)}
  .team-section--compact .team-photo{width:100px;height:100px}
  .team-section--about .team-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .team-section--about .team-card{display:flex}
}

@media (max-width:800px){
  .team-section{padding:54px 0}
  .team-section-head{display:block}
  .team-link{display:inline-block;margin-top:18px}
  .team-section--about .team-grid{grid-template-columns:1fr}
  .team-section--about .team-card{
    display:grid;
    grid-template-columns:118px minmax(0,1fr);
    align-items:center;
    text-align:left;
  }
  .team-section--about .team-photo{
    width:118px;
    height:118px;
    margin:0;
    grid-row:1 / span 3;
  }
  .team-section--about .team-bio{max-width:none}
}

@media (max-width:560px){
  .team-card,
  .team-section--compact .team-card,
  .team-section--about .team-card{
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
    padding:24px 20px;
  }
  .team-photo,
  .team-section--compact .team-photo,
  .team-section--about .team-photo{
    width:116px;
    height:116px;
    margin:0 0 8px;
  }
}


/* --- redesign pass: this file shipped with no focus, hover-motion or press
   states at all. Added to match the rest of the site. --- */
.team-link{transition:color .16s var(--ease-out),opacity .16s var(--ease-out)}
.team-link:focus-visible{outline:3px solid var(--gold);outline-offset:3px;border-radius:4px}
.team-link:active{opacity:.7}