/* ============================================================================
   team.css — Trionic "People" page-specific layout
   Roster of member cards + "how we work" split. Load AFTER trionic-content.css
   (shared base). All rules scoped under #content. From the Claude Design handoff
   (team.css was referenced but not bundled — recreated from the markup here).
   ============================================================================ */

/* --- Hero --- */
#content .team-hero { background:var(--bg-blue); }
#content .team-hero h1 { font-size:clamp(56px,10vw,150px); line-height:0.9; margin:0 0 24px; }
#content .team-hero h1 em { color:var(--pms-1915); }
#content .team-hero .lead {
  font-size:clamp(18px,1.7vw,22px); line-height:1.45;
  max-width:60ch; font-weight:500; color:#141414; margin:0;
}

/* --- Roster grid --- */
#content .team-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
#content .member {
  border:3px solid #141414; border-radius:4px; overflow:hidden; background:#fff;
  display:flex; flex-direction:column; transition:all .2s ease;
}
#content .member:hover { transform:translateY(-4px); box-shadow:8px 8px 0 #141414; }
#content .member-stage { border-bottom:3px solid #141414; }
#content .member-stage .img-slot { display:flex; width:100%; aspect-ratio:4/5; }
#content .member-body { padding:24px; display:flex; flex-direction:column; gap:14px; flex:1; }
#content .member-body .role {
  font-family:var(--display); font-weight:700; font-style:italic;
  font-size:12px; letter-spacing:0.06em; text-transform:uppercase;
  color:var(--pms-298); margin-bottom:4px;
}
#content .member-body h3 {
  font-family:var(--display); font-weight:800; font-style:italic;
  font-size:30px; line-height:0.98; letter-spacing:-0.02em; margin:0; color:#141414;
}
#content .member-body p { margin:0; font-size:14.5px; line-height:1.55; color:var(--ink-2); font-weight:500; }
#content .m-tags { display:flex; gap:8px; flex-wrap:wrap; margin-top:auto; }
#content .m-tag {
  font-family:var(--display); font-weight:700; font-style:italic;
  font-size:11px; letter-spacing:0.05em; text-transform:uppercase;
  padding:5px 11px; border:2px solid #141414; border-radius:999px; background:#fff; color:#141414;
}
#content .m-loc { font-family:var(--display); font-weight:700; font-style:italic; font-size:12.5px; color:var(--ink-2); }

/* --- How the team works --- */
#content .howwork { display:grid; grid-template-columns:1fr 1fr; gap:24px; }
#content .howwork-card {
  background:#fff; border:3px solid #141414; border-radius:4px; padding:32px;
  display:flex; flex-direction:column; gap:16px;
}
#content .howwork-card.blue { background:var(--pms-291); }
#content .hw-glyph {
  width:60px; height:60px; border:2.5px solid #141414; border-radius:50%;
  display:grid; place-items:center; background:#fff;
}
#content .howwork-card h3 {
  font-family:var(--display); font-weight:800; font-style:italic;
  font-size:30px; line-height:1.0; letter-spacing:-0.02em; margin:0; color:#141414;
}
#content .howwork-card h3 em { color:var(--pms-1915); }
#content .howwork-card.blue h3 em { color:#fff; -webkit-text-stroke:1.5px #141414; paint-order:stroke fill; }
#content .howwork-card p { margin:0; font-size:15px; line-height:1.55; color:var(--ink-2); font-weight:500; }
#content .howwork-card.blue p { color:#141414; }

/* --- Responsive --- */
@media (max-width:1000px) {
  #content .team-grid { grid-template-columns:1fr; max-width:480px; margin:0 auto; }
  #content .howwork { grid-template-columns:1fr; }
}