/* css/team.css - styles for Our-team.html only */
.tm{max-width:1120px;margin:0 auto;padding:48px 20px 32px;font-family:'Poppins',sans-serif;color:#1b2f4b}
.tm h2{font-size:1.7rem;font-weight:700;margin:56px 0 22px;padding-left:14px;border-left:5px solid #1f7a3a}
.tm h2:first-child{margin-top:0}
.tm h3{margin:0;font-size:1.05rem;font-weight:600;line-height:1.3}
.tm-role{margin:4px 0 14px;font-size:.9rem;color:#38506f}
.tm-btn{background:#1b2f4b;color:#fff;border:0;border-radius:8px;padding:8px 16px;font:500 .85rem 'Poppins',sans-serif;cursor:pointer}
.tm-btn:hover{background:#1f7a3a}
.tm-btn:focus-visible,.tm-x:focus-visible{outline:3px solid #1f7a3a;outline-offset:2px}

.tm-feature{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;margin-bottom:22px}
.tm-feat{display:flex;gap:22px;background:#fff;border-radius:14px;overflow:hidden;box-shadow:0 6px 18px rgba(27,47,75,.14)}
.tm-feat img{width:44%;aspect-ratio:3/4;object-fit:cover;flex:none}
.tm-feat .tm-txt{padding:22px 22px 22px 0;align-self:center}
.tm-feat h3{font-size:1.3rem}
.tm-feat .tm-role{font-size:1rem}

.tm-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:20px}
.tm-card{background:#fff;border-radius:10px;overflow:hidden;box-shadow:0 2px 8px rgba(27,47,75,.1);display:flex;flex-direction:column}
.tm-card img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:top}
.tm-card .tm-txt{padding:14px 16px 18px;display:flex;flex-direction:column;flex:1}
.tm-card .tm-role{flex:1}
.tm-card .tm-btn{align-self:flex-start}

.tm-modal{position:fixed;inset:0;background:rgba(27,47,75,.65);display:none;align-items:center;justify-content:center;padding:20px;z-index:1000}
.tm-modal.open{display:flex;animation:tmFade .18s ease-out}
.tm-box{position:relative;background:#fff;border-radius:14px;max-width:560px;width:100%;max-height:88vh;overflow:auto;padding:28px;display:flex;gap:20px;font-family:'Poppins',sans-serif;color:#1b2f4b}
.tm-box img{width:110px;height:140px;object-fit:cover;object-position:top;border-radius:10px;flex:none}
.tm-box p{margin:0 0 12px;line-height:1.65;font-size:.95rem}
.tm-box a{color:#1f7a3a;font-weight:600}
.tm-x{position:absolute;top:8px;right:12px;background:none;border:0;font-size:1.8rem;line-height:1;color:#1b2f4b;cursor:pointer}
@keyframes tmFade{from{opacity:0}to{opacity:1}}

@media (max-width:760px){
  .tm-feature{grid-template-columns:1fr}
  .tm-feat img{width:38%}
  .tm-box{flex-direction:column;align-items:flex-start}
}
@media (prefers-reduced-motion:reduce){.tm-modal.open{animation:none}}

/* ---- Hero: nav now sits above it, so the old 20% top padding is not needed ---- */
.team-hero{padding-top:0;min-height:260px;display:flex;align-items:center;justify-content:center}
.team-hero h4{font-size:clamp(32px,7vw,60px);margin:0;padding:0 16px}

/* ---- Stop style.css globals (h3 centred, p padding 5px) leaking into the cards and popup ---- */
.tm p,.tm-box p{padding:0}
.tm h3,.tm-box h3{text-align:left}
.tm-box h3{margin:0}