/* ==========================================================================
   team.css - about page: founder spotlight + team grid
   ========================================================================== */
.vr-founder{padding-block:var(--vr-section-y); background:var(--vr-cream);}
.vr-founder__grid{
  max-width:var(--vr-maxw); margin:0 auto; padding-inline:var(--vr-gutter);
  display:grid; grid-template-columns:.85fr 1fr; gap:3rem; align-items:center;
}
/* The portrait is cut 4:5, so on desktop cover has nothing to trim. The 16/10
   box below is the one that crops, and a centred object-position takes the
   trim off the top of her head; 20% leaves it on the counter instead. */
.vr-founder__media img{width:100%; border-radius:8px; object-fit:cover; aspect-ratio:4/5; object-position:center 20%;}
.vr-founder__eyebrow{font-family:var(--vr-ui); font-weight:500; font-size:.78rem; letter-spacing:.2em; text-transform:uppercase; color:var(--vr-blush); margin-bottom:.6rem;}
.vr-founder__name{font-weight:600; font-size:clamp(2rem,4vw,2.6rem); color:var(--vr-teal); margin-bottom:.4rem;}
.vr-founder__tag{font-style:italic; font-size:1.15rem; color:var(--vr-stone); margin-bottom:1.2rem;}
.vr-founder__body p{font-size:1.08rem; margin-bottom:1rem; max-width:56ch;}

.vr-team{padding-block:var(--vr-section-y); background:var(--vr-sand); text-align:center;}
.vr-team__grid{
  max-width:var(--vr-maxw); margin:2.5rem auto 0; padding-inline:var(--vr-gutter);
  display:grid; grid-template-columns:repeat(3,1fr); gap:2rem; align-items:stretch;
}
.vr-team__card{
  display:flex; flex-direction:column; align-items:center; text-align:center;
  background:#fff; border:1px solid var(--vr-line); border-radius:12px;
  padding:2.4rem 1.8rem 2rem; box-shadow:0 8px 24px rgba(31,42,46,.06);
  transition:transform .25s, box-shadow .25s;
}
.vr-team__card:hover{transform:translateY(-6px); box-shadow:0 18px 40px rgba(31,42,46,.12);}
.vr-team__photo{
  width:132px; height:132px; border-radius:50%; object-fit:cover; display:block;
  margin-bottom:1.3rem; box-shadow:0 0 0 5px var(--vr-cream), 0 0 0 6px var(--vr-blush);
}
.vr-team__name{font-family:var(--vr-serif); font-weight:600; font-size:1.35rem; color:var(--vr-teal); margin-bottom:.5rem;}
.vr-team__name::after{content:''; display:block; width:34px; height:2px; background:var(--vr-blush); margin:.7rem auto 0;}
.vr-team__bio{font-size:.95rem; line-height:1.6; color:var(--vr-charcoal); text-align:left; margin-top:1rem;}

/* ==========================================================================
   Full-bleed team band, sits between the story and the founder spotlight.
   Capped by aspect-ratio rather than a fixed height so the row of faces is
   never cropped out on narrow screens.
   ========================================================================== */
.vr-band{display:block; width:100%; background:var(--vr-sand);}
.vr-band img{width:100%; height:auto; aspect-ratio:2/1; object-fit:cover; object-position:center 45%;}

@media (max-width:820px){
  .vr-band img{aspect-ratio:16/10;}
}

@media (max-width:820px){
  .vr-founder__grid{grid-template-columns:1fr; gap:2rem;}
  .vr-founder__media img{aspect-ratio:16/10;}
  .vr-team__grid{grid-template-columns:1fr 1fr; gap:1.5rem;}
}
@media (max-width:560px){
  .vr-team__grid{grid-template-columns:1fr; max-width:360px; margin-inline:auto;}
}