/* =====================================================================
   /team — the page around the two people. The people themselves are
   css/person.css, shared with the contact pages, and their markup is
   written into team.html by tools/build-contacts.mjs.
   ===================================================================== */
.tm{
  position:relative;overflow:hidden;
  min-height:100vh;min-height:100dvh;
  padding:168px 0 300px;
  background-color:#0b0b0d;
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
  background-size:24px 24px;
  color:#fff;
}
.tm-head{position:relative;z-index:1}
.tm-head .eyebrow{color:#6fa6ff;margin-bottom:16px}
.tm-head h1{
  color:#fff;font-size:clamp(40px,6vw,76px);font-weight:700;
  letter-spacing:-.035em;line-height:1;
}
.tm-head p{margin:20px 0 0;max-width:56ch;color:rgba(255,255,255,.62);font-size:17px;line-height:1.6}

/* Jan first, Benjamin second — side by side where both fit the wide
   composition, one above the other everywhere else. */
.tm-people{
  position:relative;z-index:1;
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:64px 72px;margin-top:88px;
}
.tm-people .person{max-width:600px}

.tm-building{
  position:absolute;right:-24px;bottom:0;z-index:0;
  width:min(340px,34vw);height:auto;opacity:.5;pointer-events:none;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 35%);
  mask-image:linear-gradient(90deg,transparent 0%,#000 35%);
}

@media (max-width:1180px){
  .tm-people{grid-template-columns:minmax(0,600px);gap:80px}
}
@media (max-width:640px){
  .tm{padding:128px 0 240px}
  .tm-head p{font-size:16px}
  .tm-people{margin-top:56px;gap:64px}
  .tm-building{width:70vw;opacity:.35}
}