/* Hoektrans Team Section – v2 (card gallery like example) */
:root{
  --ht-green:#1e7a4a;
  --ht-green-soft:#eaf6f0;
  --ht-dark:#0c2543;
  --ht-body:#415c77;
  --card-radius:24px;
  --photo-radius:22px;
  --shadow:0 10px 30px rgba(13,48,89,.12);
}
.ht-team{max-width:80%;margin:0 auto;padding:24px 16px 64px}
.ht-team h2{font-size:clamp(28px,3vw,40px);margin:0 0 10px;color:var(--ht-dark);font-weight:800;text-transform:uppercase;letter-spacing:.4px}
.ht-team p.ht-intro{color:var(--ht-body);max-width:860px}

.ht-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:24px;margin-top:18px}
.ht-card{grid-column:span 12;background:#fff;border:1px solid #e6eff7;border-radius:var(--card-radius);box-shadow:var(--shadow);overflow:hidden;padding:16px}
@media(min-width:700px){.ht-card{grid-column:span 6}}
@media(min-width:1040px){.ht-card{grid-column:span 3}}

.ht-photo{width:100%;aspect-ratio:2/3;border-radius:var(--photo-radius);overflow:hidden;background:var(--ht-green-soft);margin-bottom:14px}
.ht-photo img{width:100%;height:100%;object-fit:cover;display:block}

.ht-name{margin:0 0 4px;color:var(--ht-dark);font-size:18px;font-weight:800}
.ht-role{    margin: 0 0 10px;
    color: #004181;
    font-weight: 800;}
.ht-bio{font-size:14px;color:var(--ht-body);margin:0 0 10px;min-height:42px}

.ht-links{display:flex;flex-wrap:wrap;gap:10px 12px}
.ht-chip{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:999px;background:#f5fbff;border:1px solid #dce7f3;color:#0e3460;font-weight:700;text-decoration:none}
.ht-chip:hover{transform:translateY(-1px)}