/* ---------- Who We Are page specific ---------- */
  .page-hero h1{ font-size:clamp(2rem,3.6vw,3rem); max-width:18ch; }

  /* Portraits. object-fit keeps a non-square source from stretching, and the
     frost ground fills the circle while the image is still loading. */
  .avatar{
    width:64px; height:64px;
    border-radius:50%;
    object-fit:cover;
    background:var(--gen-frost-2);
    flex-shrink:0;
    border:2px solid var(--gen-gold);
  }

  /* Someone with no headshot yet. Keeps the circle so the card header still
     lines up with the rest of the row, and stays greppable so swapping in a
     real portrait is a visible diff rather than a file somebody has to
     remember to overwrite. */
  .avatar.no-photo{
    display:flex;
    align-items:center;
    justify-content:center;
    font-family:var(--gen-font);
    font-weight:700;
    font-size:1.05rem;
    color:var(--gen-navy);
  }

  /* Every card is the same width, so the grid stays a real
     grid rather than stretching a short last row.
     The hairlines are borders on the cards, not a coloured ground showing
     through 1px gaps: with the gap trick, any row the team doesn't fill leaves
     an empty cell painting that ground as a solid grey block. Cards drawing
     their own edges leave unfilled cells empty, at any column count. */
  .leader-grid{
    display:grid;
    grid-template-columns:1fr;
    border-top:1px solid var(--gen-navy-line);
    border-left:1px solid var(--gen-navy-line);
  }
  .leader-card{
    background:var(--gen-frost);
    padding:30px 26px;
    border-bottom:1px solid var(--gen-navy-line);
    border-right:1px solid var(--gen-navy-line);
  }
  .leader-card .top-row{
    display:flex;
    align-items:center;
    gap:16px;
    margin-bottom:16px;
  }
  .leader-card h3{
    font-family:var(--gen-font);
    font-size:1.15rem;
    font-weight:700;
    color:var(--gen-navy);
  }
  .leader-card .role{
    font-family:var(--gen-font);
    font-size:11.5px;
    color:var(--gen-teal-text);
    margin-top:3px;
  }
  .leader-card .bio{
    font-size:13.8px;
    color:var(--gen-text-dim);
    line-height:1.6;
  }
  @media (min-width:700px){
    .leader-grid{ grid-template-columns:repeat(2,1fr); }
  }
  @media (min-width:860px){
    .leader-grid{ grid-template-columns:repeat(3,1fr); }
  }